如何在react中呈现数组的新值

Question

这里我从子组件获取数据，并试图将其添加到现有阵列中，我还试图使用地图在控制台中显示它，但当我尝试这样做时，我在控制台中一无所获：

import "./App.css";
import Home from "./Components/Home";
import {useState} from 'react';
let App = () => {
let DataList = ["Apple","Banana"];
const newList = (data)=>{
DataList = [...DataList,data];
}

return (
<div>
<Home newList = {newList}/>

{ DataList.map((val)=>(
console.log(val)
)) 
}
</div>
)
};
export default App;

Answer 1

您需要使用React钩子使其工作，然后只有您的组件才会重新发送

import "./App.css";
import Home from "./Components/Home";
import {useState} from 'react';
let App = () => {

const [DataList, setDataList] = useState(["Apple","Banana"]);
const newList = (data)=>{
let temp = [...DataList,data];
setDataList(temp);
}

return (
<div>
<Home newList = {newList}/>

{ DataList.map((val)=>(
console.log(val)
)) 
}
</div>
)
};
export default App;

Answer 2

您导入它是有原因的，请使用它：

import {useState} from 'react';

React不会检测到您声明的任何随机变量的更改。因此，它没有理由在您的代码中重新呈现组件。

状态值是React的基础。这就是如何在渲染中持久化数据，也是React如何知道重新渲染任何给定组件。将您的数据存储在状态：

const [dataList, setDataList] = useState(["Apple","Banana"]);

并使用setter函数更新状态：

const newList = (data)=>{
setDataList([...dataList, data]);
};

当React看到状态被更新时，它将对组件的重新呈现进行排队(在这种情况下，在框架内部重新调用App函数(，以便可以使用新的状态。