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

Question

I want to update the states each time when we toggle to dropdown. means saves the state and update it and again like this... I am trying the following code:

My React code:

  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>

But the problem is that once changed the select menu, it loads and call the api and the page renders. But again the second time when I change the dropdown it throws the following error:

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 I don't understand if the filter arrays element states getting updated or not. The first time when I change the select menu options it works. but again when I change to different option it throws the above like error.

Answer 1

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

I think you're updating the state incorrectly. You should update the state like this

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