Как отобразить обновленный массив после добавления к нему? - PullRequest
Новая
       5

Как отобразить обновленный массив после добавления к нему?

0 голосов
/ 30 апреля 2018

Просто пытаюсь понять это, не могу на самом деле добраться ... По сути, у меня есть что-то в состоянии, называемое «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;

Ответы [ 3 ]

0 голосов
/ 30 апреля 2018

Вы хотите что-то вроде этого: 

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>
    );
  }
}

Рабочий пример здесь .

0 голосов
/ 30 апреля 2018

Ну проблема в штатах

  • editCodes ==> тот, который обновляется, но не в методе рендеринга
  • arrayCodes ==> тот, который вы показываете в методе рендеринга
  • currentCode ==> временно сохранить значение для нового значения

Просто измените его на 

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

Счастливое кодирование \ m /

В дополнение к этому Используйте map или reduce для рендеринга обновленного массива

0 голосов
/ 30 апреля 2018

Похоже, вы обновляете неправильное свойство в состоянии. Обновление массива editCodes, но не чтение с него. В addEditCode методе, не должна ли эта строка:

this.setState({ editCodes: arrayCode })

будь таким:

this.setState({ arrayCodes: arrayCode })

...