обновление перехватчиков useState в массиве (Next.js)

Я пытаюсь обновить свой массив 'state' и вставить в него элементы типа String с помощью 'setState', но это не работает.
Я знаю, что это не работает с push ().
Я также пытался обновить мой массив 'state' с оператором распространения, но он тоже не работает.
Вот мой код:

import React, { useState } from 'react';
import _, { debounce } from 'lodash';


export default function Search() {

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

  const handleChange = debounce(async (value) => {
    const url = `http://localhost:3100/`
    if (value == '') {
      return
    }
    let response = await fetch(url, {
      headers: {
        'Content-Type': 'application/json'
      },
      method: 'POST',
      body: JSON.stringify({ value })
    })

    let test = await response.json()
    console.log(test)

    setState(state.concat(test))
    // setState([...state, test]) it also doesn't work
    console.log(state)    
  }, 1000)

  return (
    <>
      <div>
        <input onChange={e => handleChange(e.target.value)} />
      </div>
    </>
  )
}

Массив «состояние» остается пустым. Мне нужно понять почему, пожалуйста.


reactjs javascript state react-hooks use-state
person sam    schedule 08.06.2020    source источник
comment
что показывает ваш console.log после let test = await response.json ()?   -  person Sir Codes Alot    schedule 08.06.2020
comment
Я получаю такой массив ['cars', 'boat', 'bike']   -  person sam    schedule 08.06.2020

Ответы (1)


arrow_upward
3
arrow_downward

1.) Измените if(value == '') на if(value ==='')

2.) console.log(state) после того, как ваш setState вернет предыдущее значение состояния, поскольку компонент еще не обновился. Посмотрите на пример здесь: https://codesandbox.io/s/friendly-ives-vvo13?file=/src/App.js:103-474, введите что-нибудь и посмотрите на консоль. Затем введите что-нибудь еще и посмотрите на консоль. Вы увидите, что консоль показывает состояние того, что вы набрали ранее. Однако, если вы посмотрите на {состояние}, отображаемое внутри возврата, оно покажет вам текущее состояние.

    export default function App() {
  const [state, setState] = useState([]);

  const handleChange = debounce(async value => {
    let test = ["cars", "boat", "bike"];

    setState([...test, value]);
    console.log(state);
  }, 1000);

  return (
    <>
      <div>
        {state}
        <input onChange={e => handleChange(e.target.value)} />
      </div>
    </>
  );
}

Итак, вы устанавливаете состояние, просто открывая / читая его не в том месте.

person Sir Codes Alot    schedule 08.06.2020
comment
Спасибо! как вы сказали, я 'console.log' это 'состояние' в неправильном месте. - person sam; 08.06.2020