如何更新从 React Hooks 中的 API 获取的状态数组？

Question

我正在从 Studio Ghibli API 获取数据，我能够成功获取它，设置对象的状态数组并将其呈现在我的展示组件中。但是，我正在尝试创建一个函数，它将向我的状态数组中的每个对象添加新的属性“关键字”。问题是，当我尝试复制状态数组以在我的 createKeywords 函数中对其进行操作时，返回的副本为空，设置后我无法对其进行操作。

这是相关代码：

  const baseUrl = 'https://ghibliapi.herokuapp.com/'
  const [hasError, setErrors] = useState(false)
  const [movies, setMovies] = useState([])

  useEffect(() => {
    fetch(baseUrl + 'films')
      .then((res) => res.json())
      .then((res) => {
        console.log(res);
        setMovies(res)
        createKeywords()
      })
      .catch(err => setErrors(true));
  }, [])

  const createKeywords = () => {
    const moviesWithKeywords = [...movies]
    moviesWithKeywords.forEach(function(movie){
      movie.keyword = 'castle'
    }); 
    setMovies(moviesWithKeywords)
}

如果我不调用 createKeywords 函数，一切正常，但显然复制和设置新电影状态会产生问题。我尝试在 useEffect 中添加 [movies] 而不是空数组，这很有效，但 useEffect 会无限期地运行。提前谢谢你，React 不是我的强项！

Answer 1

解决方案似乎不是很明显。在某些情况下，setMovies（通常设置状态）是一个异步操作，这意味着即使您设置了 setMovies，电影变量也不会很快更新，因此您已经在执行 createKeawords 函数。这意味着在关键字函数中，电影变量没有机会更新得足够快。我建议将 res 作为参数传递给 createKeywords 并使用此变量将数组复制到 moviesWithKeywords.

在此处查看 State Updates May Be Asynchronous

部分

所以做这样的事情：

  const baseUrl = 'https://ghibliapi.herokuapp.com/'
  const [hasError, setErrors] = useState(false)
  const [movies, setMovies] = useState([])

  useEffect(() => {
    fetch(baseUrl + 'films')
      .then((res) => res.json())
      .then((res) => {
        console.log(res);
        setMovies(res)
        createKeywords(res)
      })
      .catch(err => setErrors(true));
  }, [])

  const createKeywords = (movies) => {
    const moviesWithKeywords = [...movies]
    moviesWithKeywords.forEach(function(movie){
      movie.keyword = 'castle'
    }); 
    setMovies(moviesWithKeywords)
}

如何更新从 React Hooks 中的 API 获取的状态数组？

How to update state array fetched from API in React Hooks?

fetch

reactjs

react-hooks

use-effect