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

Question

只是想解决这个问题，无法真正实现... 基本上，我有一个叫做 "arrayCodes" 的状态，它只是一个字符串数组。我想在文本框中输入要添加的内容，将其推到 "arrayCodes" 的末尾，然后希望更新后的数组显示在屏幕上。现在，我得到 'A1A2' 作为输出，但我想要 'A1A2(userinput)'。我已经放置了一些控制台日志，它已确认用户输入已添加到状态，但我无法弄清楚如何在屏幕上显示它。非常感谢任何帮助。

这是有问题的组件：

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 数组，但从未从中读取。在 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 ==> 正在更新但不在渲染方法中的代码
arrayCodes ==> 你在渲染方法中显示的那个
currentCode ==> 为新值临时保存值

改成

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

快乐编码\m/

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

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

How to Display Updated Array After Adding To It?

javascript

arrays

reactjs

state

flux