javascript - React TypeScript - 父状态更改时组件属性未更新

Question

此问题是在使用 TypeScript 的 React 中出现的我的状态中有一系列组件(文本输入)。我的状态中还有一个字符串数组，用于定义每个组件的占位符文本。每个组件在其相应的索引处引用状态中的占位符字符串数组。

当我更新占位符数组中的字符串(使用 setState)时，组件不会更新。我哪里出错了？或者我是否误解了状态/ Prop 的工作原理。

谢谢!

我已经简化了代码很多，以突出这个问题。代码:

interface IState {
  inputComponents: IResponseOption[];
  test_placeholder: string;
}
interface IResponseOption {
  Component: JSX.Element;
  InputValue: string;
}

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

    constructor(props: any){
        super(props);
        if (this.props.location.props) {
          this.state = { 
            inputComponents: [],
            test_placeholder: "TESTING"
          }
        }
    }

    componentDidMount() {      
      this.generateInputElems();
    }

    generateInputElems() {
      var createdInputOptions: IResponseOption[] = [];

      for (var i = 0; i < 5; i++) {
        var newInput: IResponseOption = {
          Component: (
            <div key={i}>
              <TextInput key={i} id={i + ""}  value="" placeholder={this.state.test_placeholder} hoverText={this.state.test_placeholder} />
            </div>
          ),
          InputValue: ""
        }
        createdInputOptions.push(newInput);
      }
      this.setState({inputComponents: createdInputOptions});
    }

    changeState() {
      this.setState({test_placeholder: "Did it change?!"});
    }

    public render() {

      let responseInputs = Object.keys(this.state.inputComponents).map((key)  => {
        return (this.state.inputComponents[key].Component);
      });

      return (

        <div>  
          {responseInputs}
        </div>
      );   
    }
}

export default NewMultiQuestion;

Answer 1

首先，输入元素仅在组件安装时生成。当状态更新时它们不会重新构建，您必须在更改状态中的 test_placeholder 后再次调用 generateInputElems() 。这并不理想，因为状态更改不应响应其他状态更改，而应响应用户操作或 API 调用响应等内容。

其次，您不应该将整个组件存储在状态中。只需存储渲染它们所需的数据，然后在渲染期间构建组件，例如

render() {
    return(
        <div>
            {this.state.inputComponents.map((input, i) => (
                <div key={i}>
                  <TextInput id={i + ""}  value="" placeholder={this.state.test_placeholder} hoverText={this.state.test_placeholder} />
                </div>
            ))}
        </div>
    );
}

这样，当占位符状态值发生变化时，它们将使用新的占位符属性值重新渲染。

对于组件数组，只有包含元素需要键。使用数组索引作为键通常不是一个好主意，如果列表发生更改(添加/删除元素)，那么如果键是索引，您将得到错误的行为。最好找到一些唯一值来标识每个数组元素。