Вставка результата аксиос с использованием крючков

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

Мой вопрос:

Как я могу вставить массив wordList в задачи, используя setTasks через ловушки?

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 в приложение.

Я новичок в реакции, поэтому извините, если вопрос глупый. Я надеюсь, что некоторые из вас хотели бы помочь :)

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), если не выВозможно, вы захотите указать зависимости в вашей ловушке эффекта.