在 React 中使用 useState 钩子更新数据数组

Question

我正在尝试在单击按钮后使用useState钩子更新数组。 我了解到state是异步更新的。 我试图通过在setMovies使用 ES6 函数来更新状态，但这似乎不起作用。 我应该怎么做？

有人可以帮忙吗？

  const [movies, setMovies] = useState([]);
  const [movie, setMovie] = useState('');

  ...


  const handleSearch = () => {
    return axios({
      method: "GET",
      url: url
      },
      params: {
        Title: movie,
      },
    })
      .then(({ data }) => {
        const { Hits } = data
        setMovies(Hits)
      })
  }

  const handleMovieChange = event => {
    setMovie(event.target.value)
  }

用户界面

<Grid container>
  <Grid item>
    <TextField onChange={handleMovieChange} label="Title" />
  </Grid>
  <Grid item>
    <Button  onClick={handleSearch}>
        Search
    </Button>
  </Grid>
</Grid>

Answer 1

您的代码看起来正确。 我想这可能是您的返回格式有问题或hits而不是Hits 。 你能登录看看它是否是小写，这是我以前经历过的吗？

const { Hits, hits } = data;
console.log("Hits:", Hits, hits)
setMovies(Hits)

Answer 2

您可能错过了TextField的值，因此它无法存储最新的搜索词

<TextField value={movie} onChange={handleMovieChange} label="Title" />