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

UI

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

Answer 1

您的代码看起来正确。我猜可能是您的返回格式有问题，或者是X而不是hits。您可以登录查看是否是小写字母，这是我以前经历过的吗？

Hits

Answer 2

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

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

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

2 个答案: