无法使用 useState React 将 props 设置为状态

Question

我是新手。我已经通读了反应文档。我不知道为什么它不起作用。所以，我来到这里。

我正在尝试在反应中创建分页。下面是我的table组件。

const Table = (props) => {
const { description, itemCount, tableHeaders, items } = props;
const pageSize = 5;
const [currentPage, setCurrentPage] = useState(1);
function handlePageChange(page) {
setCurrentPage(page);
}
const registerations = paginate(items, currentPage, pageSize);
// HERE: registerations data is correct and then I pass it to TableBody component.
return (
<React.Fragment>
<TableDescription description={description} count={itemCount} />
<div className="bg-white block w-full md:table">
<TableHeader items={tableHeaders} />
<TableBody items={registerations} />
</div>
{/* Footer & Pagination */}
<div className="bg-white block flex px-6 py-4 justify-between rounded-bl-lg rounded-br-lg">
<div className="sm:flex-1 sm:flex sm:items-center sm:justify-between">
<Pagination
itemsCount={items.length}
pageSize={pageSize}
currentPage={currentPage}
onPageChange={handlePageChange}
/>
</div>
</div>
{/* end Footer & Pagination */}
</React.Fragment>
);

并且该寄存器数组由表体组件接收。TableBody 组件中的问题是我无法使用 useState 钩子将 props 值设置为状态。

const { items: passedItems } = props;
console.log(passedItems); // ok -> I got what I passed.
const [items, setItems] = useState(passedItems);
console.log(items); // not ok -> items is previously passed items.

我怎样才能把它弄对？ 谢谢。

Answer 1

我希望它以当前的形式工作：

const { items: passedItems } = props;
console.log(passedItems); // ok -> I got what I passed.
const [items, setItems] = useState([]);
console.log(items); // not ok -> items is previously passed items.
useEffect(() => {
setItems(passedItems)
}, [passedItems])

Answer 2

在使用useState钩子时，你应该理解为什么我们需要useEffect，所以在基于类的组件中，你有特权在this.setState中使用回调函数，它将为您提供当前更新的值

this.setState(() => {
name: 'john'
}, () => console.log(this.state.name)) // you will get the immediate updated value

所以当你来到功能组件

const [name, setName] = useState(props.name)
console.log(name) // won't get the updated value

要获取更新的值，您可以使用 React.useEffect 钩子，当第二个参数更改时，每当数组 deps 时都会触发。

useEffect(() => {
// logic based on the new value
}, [name]) // so whenever the name value changes it will update and call this useEffect

useEffect可以通过三种方式调用

第一个

无需传递一系列部门

useEffect(() => {}) // this will call everytime

第二个

传递空数组

useEffect(() => {}, []) // passing empty array,it will call one time like the componentDidMount of class based component

第三个

传递数组 deps(依赖项(

useEffect(() => {
} , [name, count]) // whenever there is an update of name and count value it will call this useEffect

因此，在您的情况下，您可以通过以下方式进行操作

useEffect(() => {
setItems(passedItems)
}, [passedItems]) // whenever passedItems changes this will call and setItems will set the new passedItems

我希望你对此有清晰的想法。

Answer 3

您需要添加一个useEffect，以便在props更改时更新state。

从useState文档中：

在随后的重新渲染期间，useState 返回的第一个值将始终是应用更新后的最新状态。

const TableBody = (props) => {
const { items: passedItems } = props;
// items is set to `passedItems` only on first render
// subsequent renders will still retain the initial value in state
// until `setItems` is called
const [items, setItems] = useState(passedItems);

// add a `useEffect` to update the state when props change
useEffect(() => {
setItems(items)
}, [items])
// 
}