reactjs - 如何在 React 的类中将状态更新为 Provider 上下文

Question

我有一个问题，我需要将一个数组传递给类 DragAndDropProvider 但不工作，我可以在控制台日志中看到值，但不可能用值更新状态，收到错误为：

警告：在现有状态转换期间无法更新（例如在 内render）。渲染方法应该是 props 和 state 的纯函数。

在那一刻我称之为类索引

 const documents = UseGetDocuments();
    const { state, setItemsArray } = useContext(DragAndDropContext);
    setItemsArray(documents);

DragAndDropProvider

export class DragAndDropProvider extends Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            items: [],
            moveItem: this.moveItem,
            setItems: this.setItems
        };
    }

    an_independent_function(documents: any) {
        console.log(documents);
        this.setState({ items: documents })
    }


    render() {
        return (
            <DragAndDropContext.Provider
                value={
                    {
                        state: this.state,

                        setItemsArray: (documents: any) => {
                            this.an_independent_function(documents);
                        },
                    }

                }>
                {this.props.children}
            </DragAndDropContext.Provider>
        );
    }

标签： reactjs

Answer 1

使用 Class 组件时，您需要绑定 'this' 以使其在回调函数中工作。

constructor(props: any) {
  ...

  this.an_independent_function = this.an_independent_function.bind(this);
}