Reactjs Can'；t解决无法读取属性的错误'；地图'；react js中未定义的

我有来自API的数据，我想映射它的值。但我们不能这样做。我得到“无法读取未定义的属性“map”错误。我不知道为什么会出现这个错误

我已经尝试了所有可能的解决办法。如果代码中没有map函数，那么代码可以正常工作

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>
    );
  }
}

现在我解决了错误。但仅Crop_详细信息的值无法显示

---

但是在裁剪详细信息中有三个条目，因此创建了三个表行。我甚至检查了道具，所有的值都在里面。

我认为你在地图功能中使用了错误的数据，这导致了这样的错误（我想你应该删除裁剪细节，并在项目的地图功能中使用它）

映射函数需要一个“列表””来沿着它进行映射

用map一步一步地编写代码，并使用console.log（项）检查每个步骤

例如：

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

已更新

不能对数组和对象使用打印（通过console.log）。它返回类似[对象]的东西。 因此，您可以使用点符号、排列对象或对数据使用另一个lop来打印它

注意在地图中使用索引

不要忘记在地图上返回的项目中使用键道具。 有关映射功能和键的更多信息，请检查此链接：

---

我能从您的代码中看出的是，当您的DOM第一次呈现时，

这个.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>
);


 }
}

类MyVerticallycenteredModel扩展React.Component{
render（）{
返回(
细节
场号：{this.props.values.Farm_No}
农民编号：{this.props.values.Farmer\u Reg\u Number}
农民名称：{this.props.values.Farmer\u Name}
村庄：{this.props.values.Farmer_Village}
农场面积：{this.props.values.Farm_Area}


时令
作物名称
种植面积
作物类型
估计数量
有机状态
作物总数
{
此.props.values.Crop\u详细信息(
this.props.values.Crop_Details.map（（项，键）=>(
{项目.季节}
))})：null}
接近
);
}
}

---

在上面的代码中，我使用了三元运算符来查看

this.props.values.Crop_Details

是否存在，然后只映射它以跳过它（null），或者按照其他用户在注释中的建议，尝试登录render以查看

this.props.values.Crop_Details

是否实际存在

首先，您需要验证数据，因为变量未定义，所以会出现错误。将代码更改为以下内容。您使用的是问题中输出的

{item.seasure}

，seasure以大写的

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>
  );
 }
}

类MyVerticallycenteredModel扩展React.Component{
状态={
cropDetails:[]，
农场编号：''，
农民注册号：''，
农民姓名：''，
农民村：''，
农场面积：''，
节目：假
}
componentDidMount=（）=>{
//获取数据或从道具获取数据
常量数据=this.props.values；
//验证您的数据
这是我的国家({
cropDetails:data&data.Crop|u详细信息| |[]，
场号：数据和数据场号，
Farmer_Reg_编号：数据和数据。Farmer_Reg_编号| |“”，
Farmer_Name:data&&data.Farmer_Name | |“”，
Farmer|u村：数据和数据。Farmer|u村，
农场面积：数据和数据。农场面积，
})
}
render（）{
const items=this.state.cropDetails.map（（项，键）=>(
{项目.季节}
{item.Crop_Name}
{项目.作物面积}
{item.Crop_Type}
));
返回(
细节
农场编号：{this.state.Farm_No}
农民号：{这个。州。农民注册号}
农民姓名：{this.state.Farmer\u Name}
村庄：{这个州，农民村}
农场面积：{this.state.Farm_Area}


时令
作物名称
种植面积
作物类型
估计数量
有机状态
作物总数
{items}
接近
);
}
}

我可以使用this.props.values.xxxxx显示所有表格标题。但是this.props.values.Crop_Details上的map函数不起作用，在循环之前抛出这个errorTry
console.log（this.props.values）
看看API调用是否真的在那里你能在代码中显示获取数据的位置吗？这是不是在
componentDidMount
中？你不是在验证你的数据，你只是假设一切正常。这正在破坏您的应用程序
This.props.values.Crop\u Details
尝试
{This.props.values.Crop\u Details&&This.props.values.Crop\u Details.map（）…}
Crop\u Details
似乎是OP代码片段中的一个对象数组。它是一个数组，但是它放在了另一个对象@IROHITBhatia上，你在物品上使用map的过程是错误的。我敢肯定@Irohitbhatia没有把你带到这里。值似乎是主要对象（来自
this.props.value
）。值包含一个名为
Crop\u details
的数组。OP正试图通过它绘制地图。你能在你的回答中分享我（或OP）在这里可能做错什么的更多细节吗？@novonimo但是
this.props.value
不是数组。但是OP说他在
componentDidMount（）
中获取数据，所以
this.props
没有
值。确切地如果
this.props
没有值，那么如何在
this.props.values.Crop\u详细信息上映射操作？三元运算符将
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>
  );
 }
}