React Native：动态创建的文本框值未更新

Question

我对 React Native 并不陌生。我有一个场景，我需要动态创建 TextInput 并从数组中绑定值。数组更新后，TextInput 的值不会更新。下面是我的代码。

 constructor(props) {
    super(props);
    this.state = {
    textInputValues: [],
    textInput: [],
    samplearray://gets an array from the JSON
}

componentDidMount() {
    this.setTextInputValue();
    this.prepareTextBox();
}

setTextInputValue() {
  let textInputValues = this.state.textInputValues;
  this.state.samplearray.map(() => {
     textInputValues.push("") //default value
     this.setState({ textInputValues })
  })
}

prepareTextBox() {
let textInput = this.state.textInput;
this.state.samplearray.map((value, index) => {
    textInput.push(<TextInput style={styles.textBox} value={this.state.textInputValues[index]}  key={index} />);
})
this.setState({ textInput })}

在 render 方法中渲染 TextBox 的代码。

  {  this.state.textInput.map((value, index) => {
                        return value
  })}

我有一个 this.state.textInputValues 数组值被更改的按钮。但是这种变化并没有反映在 TextInput 中。自2天以来一直坚持这一点。任何帮助表示赞赏，在此先感谢。

Answer 1

这是您的代码块的外观（请阅读 cmets 进行解释）：

 componentDidMount() {
      this.setTextInputValue();
      // call the below function from `setTextInputValue` as you have dependency on that
      // this.prepareTextBox();
  }

  setTextInputValue() {
    let textInputValues = [...this.state.textInputValues];
    this.state.samplearray.map((value) => {
       textInputValues = [ ...textInputValues , value] //default value

       // this is how you should call `prepareTextBox`
       // in setState callback as it will confirm that state is updated
       this.setState({ textInputValues },() => {
          this.prepareTextBox();
       })
    })
  }

  prepareTextBox() {
    let textInput = [...this.state.textInput];
    this.state.samplearray.map((value, index) => {
        textInput.push(<input value={this.state.textInputValues[index]}  key={index} />);
    })
    this.setState({ textInput })
  }

---

您可以运行下面的 sn-p 并检查，希望能消除您的疑虑：

const { useState , useEffect } = React;

class App extends React.Component {
  
  constructor(props) {
      super(props);
      this.state = {
      textInputValues: [],
      textInput: [],
      samplearray:["Vivek","Darshita"]//gets an array from the JSON
      }
  }

  componentDidMount() {
      this.setTextInputValue();
  }

  setTextInputValue() {
    let textInputValues = [...this.state.textInputValues];
    this.state.samplearray.map((value) => {
       textInputValues = [ ...textInputValues , value] //default value
       this.setState({ textInputValues },() => {
          this.prepareTextBox();
       })
    })
  }

  prepareTextBox() {
    let textInput = [...this.state.textInput];
    this.state.samplearray.map((value, index) => {
        textInput.push(<input value={this.state.textInputValues[index]}  key={index} />);
    })
    this.setState({ textInput })
  }

  changeValues = () => {
    this.setState({
      textInput : [],
      textInputValues : ["New - Vivek" , "New - Darshita"]
    },() => {
      this.prepareTextBox();
    });
  }
  
  render() {
    return (
      <div>
        { this.state.textInput }
        <button onClick={this.changeValues}>Change Value</button>
      </div>
    );
  }
  
}

ReactDOM.render(<App />, document.getElementById('react-root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react-root"></div>