Question

我正在尝试从父级访问子级组件文件中的一系列场所，作为状态道具。阵列“ Venues”具有一组属性，每个属性都包括场所。名称和场所.location.address

我可以看到prop已成功传递，但是当我尝试映射数组（作为名称）时：它仅显示数组中的项数，并且在div“代码”本身中传递的数组为null。

import DropDown from './DropDown.js';

class App extends Component {

  state = {
    venues : []
  }

  componentDidMount() {
    this.getVenues()
  }

场地位置来自下面的第三方API

  getVenues = () => {
    const endPoint = "https://api.foursquare.com/v2/venues/explore?"
    const parameters = {
      client_id: "CFSJXP",
      query: "Outdoors & Recreation",
      near: "Singapore",
      v: "20200404"
    }
   })

  }

  render() {
    return (

               <DropDown dataFromApp = {this.state.venues} />

      )
  }
}

然后在组件文件中

  render () {
    return (

        <section>
          <h4>Location details</h4>
         ``` <div className='code'>
            {this.props.dataFromApp.map((item,venue) => <li key={venue}>{item}</li>)}
          </div> ```
        </section>
      </section>
    )
  }

当我尝试对数组进行字符串化时，会引发以下错误：

对象无效，无法作为React子对象（找到：具有关键字{原因，地点，referralId}）。如果您打算渲染儿童集合，请使用而是一个数组。

如何将prop数据传递到div“代码”中，然后在侧边栏上显示其数据？

Answer 1

尝试一下

 <div className='code'>
            {this.props.dataFromApp.map((item,venue) => <li key={venue}>{item.venue}</li>)}
 </div>

Answer 2

问题只在这里

{this.props.dataFromApp.map((item,venue) => <li key={venue}>{item}</li>)}

您直接尝试呈现item而不是纯数据的object。

您的错误也说明了这一点，

（找到：带有键{原因，地点，referralId}的对象）

这意味着item = {reasons="", venue="", referralId=""}

您必须执行类似的操作

{this.props.dataFromApp.map(item => <li key={item.referralId}>{item.venue}</li>)}

Answer 3

在构造函数中包装状态

constructor(){
  super();
  this.state = {
    venues : []
  };
}

在getVenues（）函数中使用

设置场地

this.setState({ venues: // the response from the third party API });

Answer 4

错误表示您正在DOM中渲染对象，而不必渲染对象的单个键或渲染必须在键上进行迭代的多个键。

您的错误

首先，您不是以本地状态存储数据。使用this.setState({venues : [response array here]})
其次，您应该像这样<li key={venue}>{item}</li>

<li key={venue}>{item.key}</li>

如何访问子组件内部传递的prop数组

4 个答案: