useEffect and API

Question

我正在尝试使用React制作一个字典。首先，我有

const [word, setWord] = useState();

然后，我有API

const dictionaryApi = async () => {
try {
const data = await axios.get(
`https://api.dictionaryapi.dev/api/v2/entries/en/${input}`
);
setWord(data.data);
} catch (error) {
console.log(error);
}
};

因此，我现在收到了来自API的data.data。我看到，显然我必须使用useEffect，尽管我不知道为什么。如果useEffect的第二个参数是一个空数组，它将只运行1次，对吗？我有一个带有输入的按钮，我想做的是将API中的数据存储在一个空数组中。所以首先我创建了一个阵列

const [change, setChange] = useState([]);

在点击功能中，我写了

setChange([...change, "a"]);

所以每次我点击它，它都会打出一个"a"。我将其作为useEffect的第二个参数传递，所以当我单击时，数组将发生变化，随之执行useEffect。

最后，我有另一个空数组，它将接收word

const [resultlist, setResultlist] = useState([]);
setResultlist([...resultlist, word]);

但第一次单击按钮时，change数组没有改变，只有第二次单击它时才会改变。我觉得我把它搞得太复杂了。我该怎么做？

Answer 1

useEffect(myFunction, [data])

在本例中，每次修改变量数据时都会执行myFunction，如果您提供一个空数组，它将只执行一次。如果你想在点击按钮时调用你的函数，你只需要将函数传递给你的按钮的onClick道具

<button onClick={myFunction}>Button</button>

我不清楚你想做什么，但如果你想把你的输入值添加到你的api收到的数组中，你可以在按钮函数中这样添加

setWord([...word, inputValue])