React.js의 상태 어레이를 올바르게 수정

React.js의 상태 어레이를 올바르게 수정

는 의의 i of of of of of of 의 끝에 요소를 .state레이, 이이??

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

(in-place)로 하는 push문제를 일으킬 수 있습니다. ★★★★★★★★★★★★★★★★★★?

및 「」의 대체 .setState낭비인 것 같아요.

React 문서에는 다음과 같이 기재되어 있습니다.

이 .state는 불변의 것으로 간주합니다.

의 ★★★★★★★★★★★★★★★★★.push는 상태를 직접 변환하여 나중에 다시 상태를 "수정"하더라도 오류 발생 가능성이 있는 코드를 초래할 수 있습니다.를 들어 라이프 방법으로는 를 들어, 라이프 사이클 를 들어 '아까', '아까', '아까', '아까', '아까'componentDidUpdate트리거되지 않습니다.

이후 React 버전에서 권장되는 접근 방식은 상태를 수정할 때 업데이터 기능을 사용하여 경주 조건을 방지하는 것입니다.

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

비표준 상태 수정을 사용할 때 발생할 수 있는 오류에 비하면 메모리 "낭비"는 문제가 되지 않습니다.

이전 React 버전의 대체 구문

하시면 됩니다.concat배열을 하므로 구문을 : 새 배열을 반환해야 합니다.

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

ES6에서 스프레드 연산자를 사용할 수 있습니다.

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,output을 잘못 사용하면 어떻게 되는지 보여 줍니다.

setTimeout() 호출에서는 3개의 항목이 올바르게 추가됩니다.이는 react가 setTimeout 콜백 내에서 업데이트를 배치하지 않기 때문입니다(https://groups.google.com/d/msg/reactjs/G6pljvpTGX0/0ihYw2zK9dEJ) 참조).

buggy onClick은 "Third"만 추가하지만 수정한 경우에는 예상대로 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'));

React에서 기능 컴포넌트를 사용하는 경우

const [cars, setCars] = useState([{
  name: 'Audi',
  type: 'sedan'
}, {
  name: 'BMW',
  type: 'sedan'
}])

...

const newCar = {
  name: 'Benz',
  type: 'sedan'
}

const updatedCarsArray = [...cars, newCar];

setCars(updatedCarsArray);

댓글에서 @nilgun이 언급했듯이 반응 불변 도우미를 사용할 수 있습니다.나는 이것이 매우 유용하다는 것을 알았다.

문서에서:

단순 푸시

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

initial Array는 아직 [1, 2, 3]입니다.

현재 많은 사람들이 useState 훅 상태를 업데이트해야 하는 문제에 직면해 있습니다.이 방법을 사용하여 안전하게 업데이트하고 여기서 공유하고자 합니다.

이게 내 주(州)이다.

const [state, setState] = useState([])

개체 이름이 있다고 가정합니다.obj1내 주(州)에 붙였으면 좋겠어이렇게 하자고 제안합니다

setState(prevState => [...prevState, obj1])

이렇게 하면 마지막에 개체를 안전하게 삽입할 수 있으며 상태 일관성도 유지됩니다.

기능 컴포넌트를 사용하고 있는 경우는, 다음과 같이 사용해 주세요.

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

여기 2020년의 Reactjs Hook의 예가 있습니다. 제가 생각하기에 다른 사람들을 도울 수 있을 것 같습니다.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(preState=>({arrayvar:[...prevState.arrayvar,newelement]}))

이것은 이 문제를 해결할 수 있을 것이다.

상태 밖에서 값을 갱신하고 forceupdate()를 실행합니다.갱신된 내용을 제어할 수 있기 때문에 반응하는 횟수가 적을수록 좋습니다.또한 업데이트 속도가 빠르면 업데이트마다 새 어레이를 만드는 데 비용이 많이 들 수 있습니다.

배열 상태에서 값을 푸시하고 이와 같이 값을 설정하고 맵 함수별로 상태 배열과 푸시 값을 정의하려고 합니다.

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

어레이 내 요소의 위치를 유지하면서 어레이 상태를 수정하려고 했을 때도 같은 문제가 있었습니다.

이는 다음과 같은 유사성과 유사성을 상호 전환하는 기능입니다.

    const liker = (index) =>
        setData((prevState) => {
            prevState[index].like = !prevState[index].like;
            return [...prevState];
        });

이 함수는 배열 상태의 요소의 인덱스를 취득하고, 이전 상태를 수정하여 상태 트리를 재구축합니다.

//get the value you want to add
const valor1 = event.target.elements.valor1.value;

//add in object 
        const todo = {
            valor1,
        }

//now you just push the new value into the state

//prevlista is the value of the old array before updating, it takes the old array value makes a copy and adds a new value

setValor(prevLista =>{
return prevLista.concat(todo) })
     

어레이 내에 어레이를 추가할 수 있었습니다.

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

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

언급URL : https://stackoverflow.com/questions/26253351/correct-modification-of-state-arrays-in-react-js