如何在下拉菜单的 onChange 中更新 useState 中的数组元素状态？ （我不是在这里谈论对象数组）

Question

每次切换到下拉菜单时，我都想更新states 。 意味着保存 state 并像这样更新它......我正在尝试以下代码：

我的React代码：

  var [state, setState] = useState({
    page: 0,
    username: "Hey Baby!",
    filter: ["search", "story", 0],
    result: 0,
    processTime: 0
  });

var { page, username, filter, result, processTime } = state;

var handleChange = name => e => {

    if (e.target.value == "popularity") {
      setState({
         ...state, filter: ["search", filter[1], filter[2]]
       });

        urls =
          "search~~"+
          filter[1] +
          "~0~" +
          filter[2];
    }
    if (e.target.value == "date") {
      setState({
      ...state, filter: ["search_by_date", filter[1], filter[2]]
      });

        urls =
          "search_by_date~~"+
          filter[1] +
          "~0~" +
          filter[2];
    }
    if (e.target.value == "stories") {
      setState({
        ...state, filter: [filter[0], "story", filter[2]]
      });

        urls =
          filter[0]+"~~story~0~" +
          filter[2];
    }
    if (e.target.value == "comments") {
      setState({
        ...state, filter: [filter[0], "comment", filter[2]]
      });

        urls =
          filter[0]+"~~comment~0~" +
          filter[2];
    }

  axios
        .get(`${process.env.REACT_APP_API}/posts/${urls}`)
      .then(function(response) {
        setState({
          result: response.data.datas.nbHits,
          processTime: response.data.datas.processingTimeMS
        });
        setPosts(response.data.datas);
        console.log(response.data.datas);
      })
      .catch(function(error) {
        console.log(error);
      });

return (
          <div>
        <div className="bg-white">
          <span>
            search{" "}
            <select onChange={handleChange('filter')}>
              <option value="stories">stories</option>
              <option value="comments">comments</option>
            </select>
          </span>
          <span>
            {" "}
            by{" "}
            <select onChange={handleChange('filter')}>
              <option value="popularity">popularity</option>
              <option value="date">date</option>
            </select>
          </span>

</div>
</div>

但问题是，一旦更改了 select 菜单，它就会加载并调用 api 并呈现页面。 但是当我第二次更改下拉菜单时，它再次抛出以下错误：

TypeError: Cannot read property '1' of undefined
(anonymous function)
C:/Users/SSSYSSY/Desktop/ServerGuy/client/src/App.js:43
  40 | }
  41 | if (e.target.value == "date") {
  42 |   setState({
> 43 |   ...state, filter: ["search_by_date", filter[1], filter[2]]
     | ^  44 |   });

PS我不明白过滤器 arrays 元素状态是否正在更新。 当我第一次更改 select 菜单选项时，它起作用了。 但是当我更改为不同的选项时，它又会抛出上述错误。

Answer 1

setState({
   result: response.data.datas.nbHits,
   processTime: response.data.datas.processingTimeMS
});

我认为您错误地更新了 state。 你应该像这样更新 state

setState({
    ...state, 
    result: response.data.datas.nbHits,
    processTime: response.data.datas.processingTimeMS
});