如何在reactjs中渲染多个组件，我做错了什么？

Question

首先，我有一个从数据库中获取数据的功能

如果数据被更改，我将创建列表组件。

但它没有用，我做错了什么？

安慰：

class TweetContainer extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            tweetData:{}, 
            tweetRender : [],
            listTweet:[]
        }
    }   

这是我从数据库中获取数据的函数

    componentDidMount(){

        fetch('http://localhost:5000/tweet')
        .then(function(response) {
            return response.json();
        })
        .then(result=>{
            this.setState({
                tweetData: result
            }, ()=>console.log(this.state.tweetData));
        });

    }

我的功能，使列表组件

    componentDidUpdate(){
        this.state.tweetRender = this.state.tweetData.data.slice(1,6);
        console.log(this.state.tweetRender);

        this.state.listTweet = this.state.tweetRender.map((tweet)=><Tweet 
        linkAvatar={'/image/jennyshen.jpg'}
        name={"Vuongxuan"}
        userName={'@vuggg'}
        tweetText={tweet.content} />);

        console.log(this.state.listTweet);

    }

    render(){
        return(
            <div id="main">
                <h2>Tweet</h2>
                <div id="stream">
                   {this.state.listTweet}
                </div>
            </div>
        );
    }
}

我不知道我做错了什么。

Answer 1

根据React docs，componentDidMount生命周期最常用的用途是：

更新DOM以响应prop或状态更改。

你想得到并呈现推文，对吗？不一定听取更新。

现在一个解决方案是删除你的componentDidUpdate()方法并将你的`render'方法更改为：

render(){
    var tweetRender = this.state.tweetData.data.slice(1,6);
    return(
        <div id="main">
            <h2>Tweet</h2>
            <div id="stream">
                {listTweet.map((tweet, idx) => 
                    <Tweet
                        key={idx}
                        linkAvatar={'/image/jennyshen.jpg'}
                        name={"Vuongxuan"}
                        userName={'@vuggg'}
                        tweetText={tweet.content} />
                )}
            </div>
        </div>
    );
}

Answer 2

将React元素（JSX）放入组件状态通常不是一个好主意。您可以只将数据存储在状态中，并从render方法中的数据派生JSX。

例

class TweetContainer extends React.Component {
  state = {
    tweetData: [],
    tweetRender: [],
    listTweet: []
  };

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        tweetData: [
          {
            id: 1,
            name: "foo",
            username: "@foo"
          },
          {
            id: 2,
            name: "bar",
            username: "@bar"
          }
        ]
      });
    }, 1000);
  }

  render() {
    return (
      <div id="main">
        <h2>Tweet</h2>
        <div id="stream">
          {this.state.tweetData.map(obj => (
            <div key={obj.id}>
              {obj.username} - {obj.name}
            </div>
          ))}
        </div>
      </div>
    );
  }
}

ReactDOM.render(<TweetContainer />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>