如何在下拉菜單的 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
});