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

时间:2018-02-27 12:42:45

标签: javascript reactjs ecmascript-6

我想获取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
}

2 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:0)

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

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

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