Question

试图解决这个问题，真的无法实现...... 基本上，我有一些名为＆＃34; arrayCodes＆＃34;这只不过是一串字符串。我想在文本框中键入要添加的内容，将其推送到＆＃34; arrayCodes＆＃34;的末尾，然后希望更新的数组显示在屏幕上。现在，我得到了A1A2＆＃39;作为输出，但我想要＆＃39; A1A2（用户输入）＆＃39;。我已经设置了一些控制台日志，并确认用户输入已添加到状态，但我无法弄清楚如何在屏幕上显示它。非常感谢任何帮助。

以下是相关组件：

len(x_arr) = N

Answer 1

您似乎正在更新状态中的错误属性。更新editCodes数组，但从不读取它。在addEditCode方法中，不应该这一行：

this.setState({ editCodes: arrayCode })

是这样的：

this.setState({ arrayCodes: arrayCode })

Answer 2

你想要这样的东西：

class Testing extends React.Component {
  state = {
    arrayCodes: ["A1", "A2"],
    currentCode: ""
  };

  addEditCode = inputCode => {
    const { arrayCodes } = this.state;
    arrayCodes.push(inputCode);
    this.setState({ arrayCodes });
  };

  setCurrentCode = input => {
    this.setState({ currentCode: input });
  };

  render() {
    return (
      <div>
        <input
          type="text"
          name="enteredCode"
          placeholder="Enter an edit code to add..."
          onChange={event => this.setCurrentCode(event.target.value)}
        />
        <button onClick={() => this.addEditCode(this.state.currentCode)}>
          Click to add
        </button>
        <h1>
          Current array in state:
          {this.state.arrayCodes.reduce((acc, c) => {
            return acc + c;
          }, "")}
        </h1>
      </div>
    );
  }
}

工作示例here。

Answer 3

问题出在状态

editCodes ==＆gt;一个得到更新但不在渲染方法
arrayCodes ==＆gt;您在渲染方法中显示的那个
currentCode ==＆gt;暂时为新值保存值

只需将其更改为

addEditCode = inputCode => {
        let arrayCodes = this.state.arrayCodes;
        arrayCodes.push(inputCode);
        this.setState({
          arrayCodes
        });
     };

快乐编码\ m /

除了使用map或reduce呈现更新的数组

之外

添加后如何显示更新的阵列？

3 个答案: