Question

我有一个函数 handleTagSearch() 分配给 onChange。在此函数中，我将 event.target.value 置于状态 tag，然后使用 axios 状态进行 tag 调用。但是，我注意到的问题是，在第一次状态更改时，此 tag 状态不会更新，而是值为空。

const [ tag, setTag ] = useState('');
const [ tags, setTags ] = useState([]);

const handleTagSearch = async(val) => {
    console.log("target val: ", val);
    setTag(val);
    console.log("value of tag: ", tag);
    const url = '127.0.0.1:8000/api/tag?name=' + tag;
    const resp = await axios.get(url);
    ...
};

return (
    <div>
        <input
            type="text"
            name="tags"
            value={tag}
            onChange={e=>handleTagSearch(e.target.value)}
        />
    </div>
);

如何在每次输入时正确更新 tag 状态？

Answer 1

您应该单独获取您的值，然后在 useEffect 内提出您的请求。

const [ tag, setTag ] = useState('');
const [ tags, setTags ] = useState([]);


// API call here 

useEffect(() =>  {
const handleTagSearch = async(val) => {
  
    console.log("value of tag: ", tag);
    const url = '127.0.0.1:8000/api/tag?name=' + tag;
    const resp = await axios.get(url);
    ...
};
 if(tag) ( handleTagSearch(val));

}, [tag])



return (
    <div>
        <input
            type="text"
            name="tags"
            value={tag}
            onChange={e=> setTag(e.target.value)} // set the value like this
        />
    </div>
);

这样您就可以及时获得标签状态。

编辑：如果您不想存储它，也可以直接使用 e.target.value 调用该函数。

Answer 2

你也可以这样做：

const [ tag, setTag ] = useState('');
const [ tags, setTags ] = useState([]);

const handleTagSearch = (event) => {
    const { target : { value } } = event;
    return setTag(value);
};

React.useEffect(() => {
    if (tag.length){
       (async ()=> {
          console.log(
            "value of tag: ", tag
          );
          const url = '127.0.0.1:8000/api/tag?name=' + tag;
          const resp = await axios.get(url);
          //...
       })();
    };
} , [tag]);

return (
    <div>
        <input
            type="text"
            name="tags"
            value={tag}
            onChange={handleTagSearch}
        />
    </div>
);

Reactjs：使用onChange在另一个函数中更新时useState状态值为空

2 个答案: