正在更新 material-table 中的数据

Question

当我向 table 添加数据时，它不会填充新记录。我创建了一个列表并显示它以查看它是否填充了新记录，它似乎已在那里更新。我将 console.log 添加到 componentWillReceiveProps 函数以查看列表是否使用新记录更新，列表确实更新但 table 永远不会更新。相当新的反应，不确定我错过了什么。

 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { fetchPosts } from '../actions/postActions';
 import MaterialTable from 'material-table';

 class Posts extends Component {   
     componentWillMount() {
         this.props.fetchPosts();
     }

     componentWillReceiveProps(nextProps) {
         if(nextProps.newPost) {
             this.props.posts.unshift(nextProps.newPost);
         }
     }

     render () {
         const postItems = this.props.posts.map(post => (
             <div key={post.id}>
                 <h3>{post.title}</h3>
                 <p>{post.body}</p>
             </div>
         ));
         return (
           <div>
             <div>
                 <h1>Posts</h1>
                 {postItems}
             </div>
             <div style={{marginLeft:'15px',marginRight:'15px'}}>
             <div style={{ maxWidth: "100%" }}>
             <MaterialTable
               title="Users List"
               columns={[
                 { title: 'User Name', field: 'id' },
                 { title: 'Email', field: 'title' },                   
               ]}
               data={this.props.posts}
             />
             <br/><br/><br/>
           </div>
           </div>
           </div>
         );
     }
 }

 Posts.propTypes = {
     fetchPosts: PropTypes.func.isRequired,
     posts: PropTypes.array.isRequired,
     newPost: PropTypes.object
 }

 const mapStateToProps = state => ({
     posts: state.posts.items,
     newPost: state.posts.item
 });

 export default connect(mapStateToProps, { fetchPosts })(Posts);

Answer 1

您不能从组件内部设置道具，只能从外部设置。这就是 state 和 props 的区别（这在 React 中非常基础，阅读它）。

首先，在构造函数中初始化状态：

constructor(props) {
  super(props);

  this.state = { posts: [] };
}

然后，当道具改变时更新状态：

componentWillReceiveProps(nextProps) {
         if(nextProps.newPost) {
             let updatedPosts = this.state.props;
             updatedPosts.unshift(nextProps.newPost);
             this.setState({ posts: updatedPosts }); 
         }
     }
}

最后，使用 table 中的状态：

...
data={this.state.posts}
...

正在更新 material-table 中的数据

Updating data in material-table

reactjs

redux

material-table