Question

我的react组件中有一个prop分类器数组，当通过表单上传文件时，它会更改。我必须根据分类器数组的值填充表单中的分类器字段。当更改分类数组时，我正在调用this.render（），但是列表并未填充。

构造函数：

constructor() {
        super();
        this.classifiers = [];
}

渲染方法：

render() {
    if(this.classifiers.length!==0){
        return(
           <form>
           </form>
        )
    }
    else{
        return(
            <form>
            </form>
        )
    }
}

假定正确编写了表单组件。当我将一些控制台日志放入render的if和else时，它们可以正常工作，但不会使用新的分类器重新呈现该组件。

Answer 1

该组件不是由props更新的，而是状态...更改props的状态...

this.setState({ whateverHere })

Answer 2

我的react组件中有一个prop分类器数组，它会改变通过表单上传文件时。

分类器与prop无关，它是一个类变量

我必须根据值在表单中填充分类字段分类器数组。

在组件中，您有时会更改或更改某些内容，请使用状态

this.state = {
    classifier: []
}

我正在呼叫this.render（）

render()

旨在由用户未明确地由react调用。不要中断流程。

我想您可以很好地更改分类器。如果没有，您可以将其更改为

const updateClassifier = (items= []) => {
    this.setState((prevState) => {
        return {
            classifier: [...prevState.classifier, ...items]
        }
    })

}

用于呈现表单

const renderMyForm = () => {
    if(this.state.classifier.length !== 0){
        return (<form></form>);
    } else {
        return (<form></form>);
    }

}

render() {
    { renderMyForm ()}
}

React组件未根据道具更改重新渲染

2 个答案: