Question

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

当我更新占位符数组（使用setState）中的字符串时，组件不会更新。我要去哪里错了？还是我误解了状态/道具的工作方式。

谢谢！

为了突出问题，我对代码进行了很多简化。代码：

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

首先，仅在安装组件时才生成输入元素。状态更新时不会重新构建它们，您必须在状态更改generateInputElems()之后再次调用test_placeholder。这是不理想的，因为状态更改不应响应其他状态更改，而应响应用户操作或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>
    );
}

这样，当占位符状态值更改时，将使用新的占位符prop值重新呈现它们。

对于组件数组，也仅包含元素需要键。通常，将数组索引用作键不是一个好主意，如果列表发生更改（添加/删除了元素），则如果键为索引，则会出现错误。最好找到一些唯一的值来标识每个数组元素。

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

1 个答案: