时间戳

首页 > 解决方案 > 使用钩子插入 axios 结果

javascript - 使用钩子插入 axios 结果

问题描述

我正在使用axiossave.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

我的问题是：

如何通过钩子使用 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到应用程序中。

在此处输入图像描述

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

标签： javascriptreactjsaxios

解决方案

您好，您可以在使用 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），如果不是，您可能希望在效果挂钩中指定依赖项。

推荐阅读