Блог

Я использую react версии 16.13.1. И я много раз использовал перехваты в своем проекте. но теперь я получаю эту ошибку еще до того, как я ее использую.

 export default function TourData(props) {
  const [collapsed, setCollapsed] = useState();
  const withinDatacollapse = props.tourWithin.slice(1);
  const withinDatashow = props.tourWithin.slice(0, 1);

  function handleViewAll() {
    setCollapsed(!collapsed);
  }

  function Object(props) {
    return (
      <div>
        {props.data amp;amp;
          props.data.map((item, index) => (
            <div key={index} className="within">
              <div
                className="image"
                style={{ background: `url(${item.image})` }}
              >
                <div className="destination">{item.country}</div>
              </div>
              <div className="options">
                <div>
                  <h5>Options</h5>
                  <div className="user-select">
                    <Select
                      options={item.options}
                      placeholder={<h4>Select Option</h4>}
                    />
                  </div>
                </div>
              </div>
              <div className="date-select">
                <div className="user-select">
                  <Select
                    options={item.date_options}
                    placeholder={<h4>Select Date</h4>}
                  />
                </div>
              </div>
              <div>
                <button>Go!</button>
              </div>
            </div>
          ))}
      </div>
    );
  }
  return (
    <div className="route">
      <div className="list-box">
        <Object data={withinDatashow} />
        <Collapse in={collapsed}>
          <Object data={withinDatacollapse} />
        </Collapse>
        <div className="bottom-view-section">
          <button onClick={handleViewAll}>View All</button>
        </div>
      </div>
    </div>
  );
}
  

Здесь я только что объявил перехват и получаю эту ошибку.
Я не могу найти, где я ошибся.

Сначала у меня была ошибка, TypeError: Cannot read property 'map' of undefined когда я выполняю сопоставление, поэтому мне пришлось поместить props.data amp;amp; непосредственно перед сопоставлением.

Вы не должны называть свои компоненты ключевыми словами Javascript, такими как Object или class.

Кроме того, вы можете захотеть определить значение по умолчанию для props.placeData, чтобы, когда оно не определено, вы не получали ошибок.

 export default function AppMain({placeData = [], ...props}) {
  

Или вы можете просто проверить в return и сказать что-то вроде «там нет места». Это зависит от вас.