添加后如何显示更新的数组？

Question

只是想弄清楚这一点，无法真正到达那里...... 基本上，我有一个名为“arrayCodes”的状态，它只是一个字符串数组。我想在文本框中输入要添加的内容，将其推送到“arrayCodes”的末尾，然后希望更新后的数组显示在屏幕上。现在，我得到“A1A2”作为输出，但我想要“A1A2（用户输入）”。我已经放了一些控制台日志，它已经确认用户输入被添加到状态中，但我不知道如何在屏幕上显示它。非常感谢任何帮助。

这里是有问题的组件：

import React, { Component } from 'react';

class Testing extends Component {
    state = {
        arrayCodes: ['A1', 'A2'],
        currentCode: '',
    }

    addEditCode = (inputCode) => {
        //console.log("Add Edit Code")
        var arrayCode;
        arrayCode = this.state.arrayCodes
        console.log("array code before push", arrayCode)
        arrayCode.push(inputCode)
        console.log("array code after push", arrayCode)
        this.setState({ arrayCodes: arrayCode })
        console.log("Array of Codes is now: ", this.state.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}</h1>

            </div>
        );
     }
}

export default Testing;

Answer 1

问题出在各州

• editCodes ==> 更新但不在渲染方法中的代码
• arrayCodes ==>你在渲染方法中显示的那个
• currentCode ==> 暂时保存新值的值

改成

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

快乐编码\m/

除此之外，使用map 或reduce 来渲染更新后的数组

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

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

this.setState({ editCodes: arrayCode })

是这样的：

this.setState({ arrayCodes: arrayCode })

?