Невозможно устранить ошибку. Невозможно прочитать свойство map из undefined в реагировать js.

Question

У меня есть данные из API, и я хочу отобразить их значения. Но не в состоянии сделать это. Я получаю сообщение об ошибке "Невозможно прочитать свойство 'карта' из неопределенного". Я не могу понять, почему я получаю эту ошибку

Я перепробовал все возможные решения. Код работает нормально, если в нем нет функции карты.

class MyVerticallyCenteredModal extends React.Component {
  render() {
    return (
      <Modal
        {...this.props}
        size="lg"
        aria-labelledby="contained-modal-title-vcenter"
        dialogClassName="farmer-modal"
        centered
      >
        <Modal.Header closeButton>
          <Modal.Title id="contained-modal-title-vcenter">
            DETAILS
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <h5>Farm No: <span className="header-values"> {this.props.values.Farm_No}</span> </h5>
          <h5>Farmer No: <span className="header-values"> {this.props.values.Farmer_Reg_Number}</span> </h5>
          <h5>Farmer Name: <span className="header-values"> {this.props.values.Farmer_Name} </span> </h5>
          <h5>Village: <span className="header-values"> {this.props.values.Farmer_Village} </span> </h5>
          <h5>Farm Area: <span className="header-values"> {this.props.values.Farm_Area} </span> </h5>

          <br/>
          <table className="farmer-table">
          <tr className="farmer-table-row">
            <th className="farmer-table-header">Season</th>
            <th className="farmer-table-header">Crop Name</th>
            <th className="farmer-table-header">Crop Area</th>
            <th className="farmer-table-header">Crop Type</th>
            <th className="farmer-table-header">Estimated Quantity</th>
            <th className="farmer-table-header">Organic Status</th>
            <th className="farmer-table-header">Crop Total</th>
          </tr>

       {
                this.props.values.Crop_Details.map((item, key) => (
                <div>
                        <tr className="farmer-table-row">
                        <td className="farmer-table-data">{item.season}</td>
                        </tr>
                </div>
        ))}
        </table>
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={this.props.onHide}>Close</Button>
        </Modal.Footer>
      </Modal>
    );
  }
}

это ответ от API

Crop_Details: Array(3)
0: {Season: "Perennial", Organic_Status: "Organic", Crop_Name: "BananaFresh", Crop_Type: "Inter", Crop_Area: "0.000000", …}
1: {Season: "Perennial", Organic_Status: "Organic", Crop_Name: "Blackpepper(ungarbled)", Crop_Type: "Inter", Crop_Area: "0.000000", …}
2: {Season: "Perennial", Organic_Status: "Organic", Crop_Name: "CoffeeArabica-Cherry", Crop_Type: "Main", Crop_Area: "0.200000", …}
length: 3
Farm_Area: "0.200078750"
Farm_No: "KA28tdfg401"
Farmer_Name: "Lakshmamma"
Farmer_Reg_Number: "KA2301075ub74"
Farmer_Village: "Dbhyt"

Теперь я исправил ошибку. Но значения только для Crop_Details не отображаются

Но в деталях обрезки есть три записи, и поэтому создаются три строки таблицы. Я даже проверил реквизит и все значения в нем присутствуют.

Answer 1

Что я могу сделать из вашего кода, так это то, что, когда ваш DOM рендерит в первый раз, this.props.values не существует.

Как насчет того, чтобы попробовать что-то подобное

class MyVerticallyCenteredModal extends React.Component {
  render() {
    return (
      <Modal
        {...this.props}
        size="lg"
        aria-labelledby="contained-modal-title-vcenter"
        dialogClassName="farmer-modal"
        centered
      >
        <Modal.Header closeButton>
          <Modal.Title id="contained-modal-title-vcenter">
            DETAILS
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
      <h5>Farm No: <span className="header-values"> {this.props.values.Farm_No}</span> </h5>
      <h5>Farmer No: <span className="header-values"> {this.props.values.Farmer_Reg_Number}</span> </h5>
      <h5>Farmer Name: <span className="header-values"> {this.props.values.Farmer_Name} </span> </h5>
      <h5>Village: <span className="header-values"> {this.props.values.Farmer_Village} </span> </h5>
      <h5>Farm Area: <span className="header-values"> {this.props.values.Farm_Area} </span> </h5>

      <br/>
      <table className="farmer-table">
      <tr className="farmer-table-row">
        <th className="farmer-table-header">Season</th>
        <th className="farmer-table-header">Crop Name</th>
        <th className="farmer-table-header">Crop Area</th>
        <th className="farmer-table-header">Crop Type</th>
        <th className="farmer-table-header">Estimated Quantity</th>
        <th className="farmer-table-header">Organic Status</th>
        <th className="farmer-table-header">Crop Total</th>
      </tr>

   {
    this.props.values.Crop_Details? (
            this.props.values.Crop_Details.map((item, key) => (
            <div>
                    <tr className="farmer-table-row">
                    <td className="farmer-table-data">{item.season}</td>
                    </tr>
            </div>
    ))}): null }
    </table>
    </Modal.Body>
    <Modal.Footer>
      <Button onClick={this.props.onHide}>Close</Button>
    </Modal.Footer>
  </Modal>
);


 }
}

В приведенном выше коде I a использовал троичный оператор, чтобы увидеть, существует ли this.props.values.Crop_Details, затем сопоставить его только с тем, чтобы пропустить его (null) или, как это было предложено другими пользователями в комментарии, попробуйте войти в систему render, чтобы увидеть, если this.props.values.Crop_Details действительно существует.

Answer 2

Прежде всего, вам нужно проверить ваши данные, вы получаете эту ошибку, потому что переменная не определена.Измените свой код на следующий.Вы используете <td className="farmer-table-data">{item.season}</td> из вывода в вашем вопросе, сезон начинается с заглавной буквы S

class MyVerticallyCenteredModal extends React.Component {

state = {
  cropDetails: [],
  Farm_No: '',
  Farmer_Reg_Number: '',
  Farmer_Name: '',
  Farmer_Village: '',
  Farm_Area: '',
  show: false
}

componentDidMount = () => {

  // fetch data or get data from props
  const data = this.props.values;

  // validate your data
  this.setState({
    cropDetails: data && data.Crop_Details || [],
    Farm_No: data && data.Farm_No || '',
    Farmer_Reg_Number: data && data.Farmer_Reg_Number || '',
    Farmer_Name: data && data.Farmer_Name || '',
    Farmer_Village: data && data.Farmer_Village || '',
    Farm_Area: data && data.Farm_Area || '',
  })
}

render() {

  const items = this.state.cropDetails.map((item, key) => (
    <tr>
      <td>{item.Season}</td>
      <td>{item.Crop_Name}</td>
      <td>{item.Crop_Area}</td>
      <td>{item.Crop_Type}</td>
    </tr>
  ));

  return (
    <Modal
      {...this.props}
      size="lg"
      aria-labelledby="contained-modal-title-vcenter"
      dialogClassName="farmer-modal"
      centered
    >
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">
          DETAILS
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <h5>Farm No: <span className="header-values"> {this.state.Farm_No}</span> </h5>
        <h5>Farmer No: <span className="header-values"> {this.state.Farmer_Reg_Number}</span> </h5>
        <h5>Farmer Name: <span className="header-values"> {this.state.Farmer_Name} </span> </h5>
        <h5>Village: <span className="header-values"> {this.state.Farmer_Village} </span> </h5>
        <h5>Farm Area: <span className="header-values"> {this.state.Farm_Area} </span> </h5>

        <br />
        <table className="farmer-table">
          <tr className="farmer-table-row">
            <th className="farmer-table-header">Season</th>
            <th className="farmer-table-header">Crop Name</th>
            <th className="farmer-table-header">Crop Area</th>
            <th className="farmer-table-header">Crop Type</th>
            <th className="farmer-table-header">Estimated Quantity</th>
            <th className="farmer-table-header">Organic Status</th>
            <th className="farmer-table-header">Crop Total</th>
          </tr>

          {items}

        </table>
      </Modal.Body>
      <Modal.Footer>
        <Button onClick={this.props.onHide}>Close</Button>
      </Modal.Footer>
    </Modal>
  );
 }
}

рабочий пример

Answer 3

Я думаю, что вы используете неверные данные для своей функции карты, и это вызывает такую ​​ошибку (я думаю, вам следует удалить Crop_Details и использовать ее в функции карты для элемента).

функция карты нуждается в " Перечислите", чтобы пройти по нему.

напишите свой код с картой шаг за шагом и используйте console.log (item) для проверки каждого шага.

например:

this.props.value.map(item=>console.log(item))
this.props.value.Crop_Details.map(item=>console.log(item))

обновлено

вы не можете использовать print (через console.log) для Array и Object.Возвращает что-то вроде [объект объекта].так что вы можете использовать точечную нотацию, растянутый объект или использовать другую петлю для ваших данных, чтобы напечатать ее.

Помните об использовании индекса в карте

нене забудьте использовать ключ реквизит в возвращаемых предметов на карте.для получения дополнительной информации о функции карты и ключе проверьте эту ссылку: https://reactjs.org/docs/lists-and-keys.html