Question

我正在研究一个黑客新闻克隆，我试图使用componentDidMount中的axios从其api中获取最新故事的ID，然后再进行一次axios调用以获取这些故事并将其推入状态数组，但是当我尝试时映射并渲染该数组，什么都不会显示

class App extends Component {

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

  componentDidMount() {
    axios.get('https://hacker-news.firebaseio.com/v0/topstories.json')
      .then( result => {
        result.data.slice(0, 10).forEach(element => {
          axios.get('https://hacker-news.firebaseio.com/v0/item/' + element + '.json')
            .then( value => {
              this.state.posts.push(value)
            })
            .catch(err =>{
              console.log(err)
            })
        })
      })
      .catch(err => {
          console.log(err);
      })
  }


  render() {
    return (
    <div>
      <Header title="Hacker News" />
      {this.state.posts.map( (element, index) => <Post key={element.data.id} serialNum={index} postTitle={element.data.title} postVotes={element.data.score} postAuthor={element.data.by} />) }
    </div> 
    )
  }
}

Answer 1

尝试这样设置状态：

 axios.get('https://hacker-news.firebaseio.com/v0/item/' + element + '.json')
            .then( value => {
              this.setState({
                posts: [value, ...this.state.posts]
              })
            })
            .catch(err =>{
              console.log(err)
            })
        })

通过这种方式，您使用setState并将每个新值附加到现有状态。

Answer 2

componentDidMount()在Render()之后仅被调用一次。除非您使用setState()，否则React无法知道状态变化。

componentDidMount() {
    axios.get('https://hacker-news.firebaseio.com/v0/topstories.json')
      .then( result => {
        result.data.slice(0, 10).forEach(element => {
          axios.get('https://hacker-news.firebaseio.com/v0/item/' + element + '.json')
            .then( value => {
              this.setState({posts: [value, ...this.state.posts]})
            })
           })
         })
        }

使用this.setState({posts : [value, ...this.state.posts]})代替this.state.posts.push(value)。使用...（扩展运算符）可将值附加到原始posts数组。

Answer 3

如评论中所述，请勿将push用于设置状态。在代码中发出第二个请求时，必须更改setState方法以散布新值。

class App extends React.Component {

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

  componentDidMount() {
    axios.get('https://hacker-news.firebaseio.com/v0/topstories.json')
      .then( result => {
        result.data.slice(0, 10).forEach(element => {
          axios.get('https://hacker-news.firebaseio.com/v0/item/' + element + '.json')
            .then( value => {
               this.setState(prevState => ({posts: [ value.data, ...prevState.posts]}))
            })
            .catch(err =>{
                console.log("err");
                console.log(err);
            })
        })
      })
      .catch(err => {
          console.log(err);
      })
  }


  render() {
    return (
       <div>
          {this.state.posts && this.state.posts.map( (element, index) => 
             <div key={element.id}>
                {element.title}
             </div>
          )}
        </div> 
    );
  }
 }

状态数组无法在React.js中正确呈现

3 个答案: