Как очистить / сбросить массив внутри состояния в React (JSX)

Question

Я пытаюсь создать простую страницу с React и JSX, которая сгенерирует пару полей ввода, которые можно стереть, нажав кнопку.

В настоящее время я храню пустой массив в состоянии страницы, который обновляется функцией addItems.

По какой-то причине я не могу очистить массив с помощью своей функции очистки.Я понимаю, что setState является асинхронным, но мой массив никогда не обновляется и никогда не исчезает.

"use strict";

function Node(props) {
    return(<div>
        <input type="text" placeholder="input here"></input>
    </div>);
}

class Page extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            arr: [],
            thresh: 5,
            del: "Delete",
        };
        this.addItem = this.addItem.bind(this);
        this.clear = this.clear.bind(this);
    }

    addItem = (index, array) => {
        if (index == this.state.thresh) {
            this.setState((state, props) => ({
                arr: array,
            }));
            return;
        }
        index++;
        array.push(<Node key={index} />);
        this.addItem(index, array);
    };

    clear = newArr => {
        this.setState({
            arr: newArr,
        }, () => { console.log(this.state.arr) });
    };

    render() {
        return(<div id="wrapper onClick={() => {this.addItem(0,[])}}>
        <div id="fields">
        {this.state.arr}
        </div>
        <button onClick={() => {this.clear([])}}>{this.state.del}</button>
        </div>
    }
}
ReactDOM.render(<Page />, document.getElementById("root"));

Я ожидаю, что когда я нажму кнопку удаления, массив будет перезаписан пустым массивом, но этоне произойдет.Что я могу делать не так?

Answer 1

Функция очистки выглядит хорошо, хотя, когда я пытался запустить ваш код, она выскакивала несколько ошибок и опечатка. Также метод addItem кажется мне странным ... вы не помещаете узлы в state.arr, а постоянно помещаете их в пустой массив.

здесь я попытался немного очистить код, и хотя функциональность может не соответствовать вашим ожиданиям, это доказывает, что очистка - это первое, что вам нужно сделать:)

в фрагменте ниже функция очистки работает нормально и не изменяется.

function Node(props) {
    return(<div>
        <input type="text" placeholder="input here"></input>
    </div>);
}

class Page extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            arr: [],
            thresh: 5,
            del: "Delete",
        };
        this.addItem = this.addItem.bind(this);
        this.clear = this.clear.bind(this);
    }

    addItem(index, array) {

        var newArr = JSON.parse(JSON.stringify(this.state.arr))
        newArr.push(<Node />)
            this.setState({
              arr: newArr
            });
    }

    clear(newArr) {
        this.setState({
            arr: newArr,
        }, () => { console.log(this.state.arr) });
    }

    render() {
        return(<div>
        <div id="wrapper" onClick={() => {this.addItem(0,[1])}}>asdasd</div>
          <div id="fields"> {this.state.arr} </div>
          <button onClick={() => {this.clear([])}}>{this.state.del}</button>
        </div>)
    }


}
ReactDOM.render(<Page />, document.getElementById("root"));

Попробуйте построить / добавить свою логику здесь поверх кода, и она будет работать.

Answer 2

Я заметил здесь довольно много проблем, но я вижу одну вещь - ваша кнопка удаления завернута в добавляемый контейнер.поэтому каждый раз, когда вы нажимаете кнопку удаления, он также добавляется в массив.

на другой ноте, хотя этот код не выглядит функциональным.То, как написано это, выглядит так, будто оно никогда не добавит ничего в массив состояний, поэтому я не уверен, как вы видите что-либо, кроме пустого массива.

Я полагаю, что вы пытаетесь выполнить что-то вроде этого:

function Node(props) {
    return (<div>
        <input type="text" placeholder="input here"></input>
    </div>);
}

export default class ClearTest extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            arr: [<Node key={1} />],
            thresh: 5
        };
    }

    addItem = () => {
        const { arr, thresh } = this.state;
        if (arr.length < thresh)
        this.setState({ arr: [...(arr), <Node key={arr.length + 1} />] })
    };

    clear = () => {
        this.setState({ arr: [] }, () => { console.log(this.state.arr) });
    };

    public render() {
        return (
            <div id="wrapper">
                <div id="fields">
                    {this.state.arr}
                </div>
                <button onClick={this.clear}>Delete</button>
                <button onClick={this.addItem}>Add</button>
            </div>
        );
    }
}

это переместит кнопку добавления на кнопку и позволит добавить до 5 входов.Нажав на кнопку «Удалить», вы удалите их все.

Answer 3

`

clear = () => {
        this.setState({
            arr: [],
        }, () => { console.log(this.state.arr) });
        setTimeout(() => { console.log("o/p", this.state.arr); }, 3000);
    };

` Будет работать попробуйте поставить функцию таймера. это работает Acyncronasly.

Answer 4

Ваш понятный метод должен выглядеть следующим образом:

clear = () => {
        this.setState({
            arr: [],
        });
    };

ваш обработчик кликов в кнопке:

<button onClick={this.clear}>{this.state.del}</button>

и если вы используете функции стрелок, вам не нужно связывать их в конструкторе, вы можете удалить

связывания