javascript - 使用钩子(Hook)插入 axios 结果

Question

我正在使用 axios 从 save.json 获取数据通过REST API文件。

我遇到的问题是我似乎无法将结果返回到代码顶部的“任务”中。我不知道把它放在代码中的哪里，也不知道要写什么。我希望您能提供一些建议或解决方案。

这是我要获取的代码:

export default function Tasks() {
  let [tasks, setTasks] = useState([

    {
      content: 'Example',
    }
  ]);

  useEffect(() => {

    axios.get('http://localhost:8080/all',{
      crossDomain:true,
      method: 'GET',
      mode: 'no-cors',
      credentials: 'include',
      }
    )
    .then(function(res){
      console.log('TodoItems is fetching.. ',res);
      if (res.status !== 200){
        console.log('Fetching failed, response status: '+ res.status);
        return;
      }
      console.log(res.data.wordList)
    })
    .catch(function(err) {
      console.log('Fetch error: ' , err);
    });

  }, []);




 // });

  let handleAddTask = task => {
    setTasks(tasks.concat(task));
    console.log("handleAddTask content: " + JSON.stringify(task))
  };

  let handleDeleteTask = id => {
    setTasks(tasks.filter((task) => task.id !== id));
  };

这是我收到的:

TodoItems is fetching..  
{data: {…}, status: 200, statusText: "", headers: {…}, config: {…}, …}
config: {url: "http://localhost:8080/all", method: "get", headers: {…}, transformRequest: Array(1), transformResponse: Array(1), …}
data:
name: null
todo: null
wordList: Array(5)
0: {done: true, description: "Test"}
1: {done: true, description: "Test"}
2: {done: true, description: "Test"}
3: {done: true, description: "Test"}
4: {done: true, description: "Test"}
length: 5
__proto__: Array(0)
__proto__: Object
headers: {content-type: "application/json;charset=UTF-8"}
request: XMLHttpRequest {readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, onreadystatechange: ƒ, …}
status: 200
statusText: ""
__proto__: Object

我的问题是:

如何通过钩子(Hook)使用 setTasks 将 wordList 数组插入到任务中？

console.log(res.data.wordList)返回:

(5) [{…}, {…}, {…}, {…}, {…}]
0:
description: "Test"
done: true
__proto__: Object
1: {done: true, description: "Test"}
2: {done: true, description: "Test"}
3: {done: true, description: "Test"}
4: {done: true, description: "Test"}
length: 5
__proto__: Array(0)

这就是应用程序的样子。我想加载我的save.json进入应用程序。

我对 react 还很陌生，所以如果这个问题很愚蠢，请原谅。我希望你们中的一些人愿意帮忙:)

Answer 1

您好，在使用 useState 时，您可以使用解构数组的第二个参数来设置功能组件中的状态。在你的情况下，这将是 setTasks..

 .then(function(res){
  console.log('TodoItems is fetching.. ',res);
  if (res.status !== 200){
    console.log('Fetching failed, response status: '+ res.status);
    return;
  }
  // set tasks here
  setTasks(res.data.wordList);

})

我想您只想在安装此组件时触发此效果，因此在依赖项中保留一个空数组是可以的(类似于 componentDidMount)，如果不是，您可能需要在效果 Hook 中指定依赖项。