更新數組 useState 反應鈎子（Next.js）

Question

我正在嘗試更新我的“狀態”數組並使用“setState”將字符串類型的項目插入其中，但它不起作用。
我知道它不適用於 push()。
我還嘗試使用擴展運算符更新我的“狀態”數組，但它也不起作用。
這是我的代碼：

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

“狀態”數組保持為空。 我需要了解為什么。

Answer 1

1.) 將if(value == '')更改為if(value ==='')

2.) console.log(state)在你的 setState 之后將返回 state 之前的值，因為組件還沒有刷新。 查看此處的示例： https://codesandbox.io/s/friendly-ives-vvo13?file=/src/App.js:103-474並輸入一些內容並查看控制台。 然后輸入其他內容並查看控制台。 您將看到控制台顯示您之前輸入的 state。 但是，如果您查看返回內部呈現的 {state}，它將顯示當前的 state。

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

因此，您正在設置 state，只是在錯誤的位置訪問/讀取它。

Answer 2

https://codesandbox.io/s/next-js-infinite-scroll-3vfem?file=/pages/Content.js

我從上面的演示中向這個 function 添加了一行

const getMorePost = async () => {

      const res = await fetch(
        `https://jsonplaceholder.typicode.com/todos?_start=${posts.length}&_limit=20`
      );

      const newPosts = await res.json()

      setHasMore(!!newPosts.length)

      setPosts((post) => [...post, ...newPosts])
    }

現在滾動完成。