Question

我想获取JSON数据，将其存储在状态中，然后通过props将其传递给组件。在组件中我想使用TypeError: this.props.dataQueries.map is not a function.函数，但它显示了这个错误： class App extends Component { constructor(props) { super(props); this.state = { dataQueries: '' } } fetchData() { fetch('https://jsonplaceholder.typicode.com/posts', {method: "GET"}). then(res => res.json()). then(result => this.setState({ dataQueries: result })); } componentWillMount() { this.fetchData(); } render() { return ( <div> <ShowPosts dataQueries={ this.state.dataQueries } /> </div> ); } } 这是我的代码：

class ShowPosts extends Component {
  render() {
    return (
      <div>
      {
      this.props.dataQueries.map((query, index) => {
        return index;
      })
      }
      </div>
    );
  }
}

这是我的组成部分：

{
   name : 'John',
   scores: [10, 12, 14, 16],
   lastScore: 16
},
{
   name : 'Mary',
   scores: [78, 20, 14],
   lastScore: 14
}

Answer 1

最初，您将dataQueries设置为''。其中没有map，因为它是一个字符串。当您的fetchData异步调用完成时，它只是以后的数组。在异步调用完成之前，没有任何事情可以阻止render被调用。

将其初始化为[]，或修改render以避免在数组不是数组时尝试将其用作数组。

Answer 2

您应该在this.fetchData()生命周期方法中调用componentDidMount()。因此，当仅安装组件时，您将使用API的响应更新状态。此外，当有要使用条件渲染渲染的帖子时，您应该渲染ShowPosts组件。

render() {
  return (
    <div>
      {this.state.dataQueries.length && <ShowPosts dataQueries={ this.state.dataQueries } />}
    </div>
  );
}

你的初始dataQueries应该是一个空数组。 dataQueries = []

TypeError：this.props.propName.map不是函数反应js

2 个答案: