ReactJSでの状態配列の正しい修正

state配列の最後に要素を追加したいのですが、これは正しい方法ですか？

this.state.arrayvar.push(newelement);
this.setState({arrayvar:this.state.arrayvar});

配列をインプレースで変更するpushと問題が発生するのではないかと心配しています-安全ですか？

アレイのコピーを作成し、setStateそれを無駄にすることの代替案。

ドキュメントが反応言います：

this.stateを不変であるかのように扱います。

あなたは、pushあなたが、その後、再び状態を「リセット」されている場合でも、直接、状態を変異し、それが潜在的に発生しやすいコードをエラーにつながる可能性があります。F.ex、それはcomponentDidUpdateトリガーしないなどのいくつかのライフサイクルメソッドにつながる可能性があります。

後のバージョンのReactで推奨されるアプローチは、競合状態を防ぐために状態を変更するときにアップデーター関数を使用することです。

this.setState(prevState => ({
  arrayvar: [...prevState.arrayvar, newelement]
}))

メモリの「無駄」は、非標準の状態変更を使用したときに直面する可能性のあるエラーと比較すると問題ではありません。

以前のReactバージョンの代替構文

concatそれは新しい配列を返すので、あなたはきれいな構文を得るために使うことができます：

this.setState({ 
  arrayvar: this.state.arrayvar.concat([newelement])
})

ES6では、Spread Operatorを使用できます。

this.setState({
  arrayvar: [...this.state.arrayvar, newelement]
})

を使用してES6いる場合、最も簡単です。

initialArray = [1, 2, 3];

newArray = [ ...initialArray, 4 ]; // --> [1,2,3,4]

新しいアレイは [1,2,3,4]

Reactで状態を更新するには

this.setState({
         arrayvar:[...this.state.arrayvar, newelement]
       });

アレイの解体の詳細

を使用した最も簡単な方法ES6：

this.setState(prevState => ({
    array: [...prevState.array, newElement]
}))

Reactは更新をバッチ処理する場合があるため、正しい方法は、setStateに更新を実行する関数を提供することです。

React更新アドオンの場合、以下が確実に機能します。

this.setState( state => update(state, {array: {$push: [4]}}) );

またはconcat（）の場合：

this.setState( state => ({
    array: state.array.concat([4])
}));

次の例は、https：//jsbin.com/mofekakuqi/7/edit？jsの出力を示しています。

ReactはsetTimeoutコールバック内で更新をバッチ処理しないため、setTimeout（）呼び出しは3つの項目を正しく追加します（https://groups.google.com/d/msg/reactjs/G6pljvpTGX0/0ihYw2zK9dEJを参照））。

バグのあるonClickは「3番目」のみを追加しますが、修正されたものは、期待どおりにF、S、Tを追加します。

class List extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      array: []
    }

    setTimeout(this.addSome, 500);
  }

  addSome = () => {
      this.setState(
        update(this.state, {array: {$push: ["First"]}}));
      this.setState(
        update(this.state, {array: {$push: ["Second"]}}));
      this.setState(
        update(this.state, {array: {$push: ["Third"]}}));
    };

  addSomeFixed = () => {
      this.setState( state => 
        update(state, {array: {$push: ["F"]}}));
      this.setState( state => 
        update(state, {array: {$push: ["S"]}}));
      this.setState( state => 
        update(state, {array: {$push: ["T"]}}));
    };



  render() {

    const list = this.state.array.map((item, i) => {
      return <li key={i}>{item}</li>
    });
       console.log(this.state);

    return (
      <div className='list'>
        <button onClick={this.addSome}>add three</button>
        <button onClick={this.addSomeFixed}>add three (fixed)</button>
        <ul>
        {list}
        </ul>
      </div>
    );
  }
};


ReactDOM.render(<List />, document.getElementById('app'));

@nilgunがコメントで述べたように、反応不変性ヘルパーを使用できます。これはとても便利だと思いました。

ドキュメントから：

シンプルなプッシュ

var initialArray = [1, 2, 3];
var newArray = update(initialArray, {$push: [4]}); // => [1, 2, 3, 4]

initialArrayはまだ[1、2、3]です。

機能部品を使用している場合は、以下のように使用してください。

const [chatHistory, setChatHistory] = useState([]); // define the state

const chatHistoryList = [...chatHistory, {'from':'me', 'message':e.target.value}]; // new array need to update
setChatHistory(chatHistoryList); // update the state

配列に新しい要素を追加push()するには、答えが必要です。

要素を削除して配列の状態を更新するには、以下のコードが私のために機能します。splice(index, 1)動作しません。

const [arrayState, setArrayState] = React.useState<any[]>([]);
...

// index is the index for the element you want to remove
const newArrayState = arrayState.filter((value, theIndex) => {return index !== theIndex});
setArrayState(newArrayState);

配列の状態で値をプッシュし、このように値を設定し、マップ関数で状態配列を定義して値をプッシュしようとしています。

 this.state = {
        createJob: [],
        totalAmount:Number=0
    }


 your_API_JSON_Array.map((_) => {
                this.setState({totalAmount:this.state.totalAmount += _.your_API_JSON.price})
                this.state.createJob.push({ id: _._id, price: _.your_API_JSON.price })
                return this.setState({createJob: this.state.createJob})
            })

これは私が配列内に配列を追加するのに役立ちました

this.setState(prevState => ({
    component: prevState.component.concat(new Array(['new', 'new']))
}));

2020年のReactjsフックの例を次に示します。Reactjsテーブルに新しい行を追加するために使用しています。何か改善できるかどうか教えてください。

機能状態コンポーネントに新しい要素を追加します。

状態データを定義します。

    const [data, setData] = useState([
        { id: 1, name: 'John', age: 16 },
        { id: 2, name: 'Jane', age: 22 },
        { id: 3, name: 'Josh', age: 21 }
    ]);

ボタンに新しい要素を追加する機能をトリガーさせる

<Button
    // pass the current state data to the handleAdd function so we can append to it.
    onClick={() => handleAdd(data)}>
    Add a row
</Button>

function handleAdd(currentData) {

        // return last data array element
        let lastDataObject = currentTableData[currentTableData.length - 1]

        // assign last elements ID to a variable.
        let lastID = Object.values(lastDataObject)[0] 

        // build a new element with a new ID based off the last element in the array
        let newDataElement = {
            id: lastID + 1,
            name: 'Jill',
            age: 55,
        }

        // build a new state object 
        const newStateData = [...currentData, newDataElement ]

        // update the state
        setData(newStateData);

        // print newly updated state
        for (const element of newStateData) {
            console.log('New Data: ' + Object.values(element).join(', '))
        }

}

this.setState({
  arrayvar: [...this.state.arrayvar, ...newelement]
})

//------------------code is return in typescript 

const updateMyData1 = (rowIndex:any, columnId:any, value:any) => {

    setItems(old => old.map((row, index) => {
        if (index === rowIndex) {
        return Object.assign(Object.assign({}, old[rowIndex]), { [columnId]: value });
    }
    return row;
}));

このコードは私にとってはうまくいきます：

fetch('http://localhost:8080')
  .then(response => response.json())
  .then(json => {
    this.setState({mystate: this.state.mystate.push.apply(this.state.mystate, json)})
  })