Обновление массива в React с использованием хуков - PullRequest
Новая
       7

Обновление массива в React с использованием хуков

0 голосов
/ 19 февраля 2019

Я пытаюсь понять, как работает React Hook API.Я пытаюсь добавить номер в список.Код, который я прокомментировал, т.е. myArray.push ..., похоже, не выполняет эту операцию, хотя приведенный ниже код работает нормально.Почему это так? 

import React, {useState} from 'react'

export default () => {

  const [myArray, setArray] = useState([1,2,3])

  return (
    <div>
      {myArray.map((item=>{

        return <li>{item}</li>

      }))}
      <button onClick = {()=>{

        // myArray.push(myArray[myArray.length-1]+1)
        // setArray(myArray)

        setArray([...myArray, myArray[myArray.length-1]+1])

      }}>Add</button>
    </div>
  )
}

Ответы [ 2 ]

0 голосов
/ 19 февраля 2019

Я бы порекомендовал использовать useReducer для чего-либо более сложного, чем одно значение. 

function App() {
  const [input, setInput] = useState(0);

  const [myArray, dispatch] = useReducer((myArray, { type, value }) => {
    switch (type) {
      case "add":
        return [...myArray, value];
      case "remove":
        return myArray.filter((_, index) => index !== value);
      default:
        return myArray;
    }
  }, [1, 2, 3]);

  return (
    <div>
      <input value={input} onInput={e => setInput(e.target.value)} />
      <button onClick={() => dispatch({ type: "add", value: input})}>
        Add
      </button>

      {myArray.map((item, index) => (
        <div>
          <h2>
            {item}
            <button onClick={() => dispatch({ type: "remove", value: index })}>
              Remove
            </button>
          </h2>
        </div>
      ))}
    </div>
  );
}
0 голосов
/ 19 февраля 2019

Вы не изменяете массив в коде комментирования и, следовательно, когда вы пытаетесь установить setState, хуки внутренне проверяют, что то же самое состояние передается из-за того, что ссылка не обновляется для myArray, и, следовательно, не будет вызывать повторную визуализациюснова.

Однако в рабочем коде вы создаете новый экземпляр массива и, следовательно, обновление работает правильно

...