Question

我正在构建一个博客文章系统，用户可以创建全部显示在单个页面上的多个文章，并且可以根据需要使用TinyMCE编辑器直接在同一页面上对其进行编辑。

每篇博客文章都是它自己的React组件，专门称为Post。 Post Component类负责呈现Post（即标题，正文，作者等），其中包括Edit post表单。它从App组件传递的props中获取Post数据，例如标题和正文。

App组件是入口点，它从我的服务器检索JSON格式的所有博客帖子，为每个帖子创建一个Post组件，传递相应的props并将整个Post组件压入一个数组。完成此操作后，它将调用this.setState（）并更新posts数组。

但是，如果创建了多个帖子，并且我为单个Post组件分别调用this.handleEdit（），它将更新错误的Post组件的状态。

App.tsx

class App extends React.Component<IProps, IState> {

    constructor(props: Readonly<IProps>) {
        super(props);
        this.state = {
            posts: []

        }
    }

    componentWillMount = () => {
        var req = new HTTPRequest("GET", "/qa/posts")

        req.execVoid(HTTP.RESPONSE.OK).then(function (data: []) {

            var posts = [];

            data.forEach(function (entry, index) {

                posts.push(
                    <Post
                        id={entry['id']}
                        title={entry['title']}
                        body={entry['body']}
                        author={entry['author']}
                        date={entry['created_at']}
                        showDate={entry['showDate']}
                        deletePost={() => this.deleteComponent(index)}
                        key={index}
                    />
                )
            }.bind(this))


            this.updatePosts(posts)

        }.bind(this))

    }

    updatePosts = (posts: Array<any>) => {

        if (posts.length == 0) {
            posts.push(
                <div className="card" key={1}>
                    <div className="card-content">
                        No posts to show :)
                    </div>
                </div>
            )
        }

        this.setState({
            posts: posts
        })


    }

    deleteComponent = (key: number) => {
        let posts = this.state.posts.filter(function (value, index) {
            return index != key;
        })

        this.updatePosts(posts);
    }

    componentDidMount = () => {


    }


    render(): React.ReactNode {

        return (
            <div>
                {this.state.posts}
            </div>
        )

    }

}

export default App;

当我单击this.actions()方法中显示的“取消”按钮时，this.state.editEnabled设置为true时，它不会更新当前Post类的状态，而是似乎会更新在posts数组App中创建了另一个Post。特别是，“取消”按钮将调用this.disableEdit()，将this.state.editEnabled更新为false。但是，它不对当前帖子执行此操作，而是对数组中的另一个帖子进行看似随机的操作……尝试打印与该帖子相关的帖子标题也会产生错误的帖子标题，如您在{{ 1}}

Post.tsx

this.disableEdit()

Answer 1

好。我已经解决了这个有趣的问题。事实证明，React不是问题。我使用的Materialize CSS Framework造成了问题，特别是M.AutoInit()

在错误的地方调用它可能会导致React中的事件处理程序出现问题。

React setState更新不正确的子组件

1 个答案: