在功能组件ReactJS上更新数组

问题描述

我是ReactJS的新手，我想在功能组件中进行API调用。我想用从API调用中获取的列表填充TreeBeard组件。

我可以在控制台上看到数据更新，但是由于某些原因，TreeBeard中的数据没有更新。

这是我的一些代码：

export default function Users() {

const [userAccounts,setUserAccounts] = useState([]);
useEffect(() => {
    fetch(
      `https://cors-anywhere.herokuapp.com/https://xxxx.azurewebsites.net/api/accounts`,{
        method: "GET",headers:{
        "Content-Type": "application/json","x-Requested-With": "XMLHttpRequest"
        }
      }
    )
      .then(res => res.json())
      .then(response => {
        setUserAccounts(response);
        console.log("Accounts")
        console.log(response)
      })
      .catch(error => console.log(error));
  },[UserAccounts]);


  const data = {
    name: 'Accounts',toggled: true,children: userAccounts
  };
  const [data,setData] = useState(data);

  const onToggle = (node,toggled) => {
    if (cursor) {
        cursor.active = false;
    }
    node.active = true;
    if (node.children) {
        node.toggled = toggled;
    }
    setCursor(node);
    setData(Object.assign({},data))
    console.log("Toggled")

return (
          <GridItem xs={4} sm={12} md={7}>
           <Treebeard data={data} onToggle={onToggle}/>
          </GridItem>
         
);
}

根据TreeBear的示例，我认为const data-children参数是我应该分配所用列表的位置，但是当我这样做时，即使在日志{{1 }}包含一系列记录。是否有我忘记采取的步骤？还是我搞砸了处理？ Screenshot

解决方法

问题似乎是

当代码到达此部分时。

const data = {
    name: 'Accounts',toggled: true,children: userAccounts // <---- this is [],data has not loaded yet.
  };

data.children是[]。

userAccounts在获取数据后得到更新。但是此后没有更新data.children。

您可以尝试使用.then(response => {代码部分中的这段代码来查看数据是否已更新。

setData( {
  name: 'Accounts',children: response
})

可能需要更多代码改组才能按预期进行工作。但是希望这可以帮助您开始使用加载的数据。

reactjs reactjs