無法使用 useState React 將道具設置為 state

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 組件接收。 TableBody 組件中的問題是我無法使用 useState 掛鈎將 props 值設置為 state。

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，因此在基於 class 的組件中，您有權在 this.setState 中使用回調 function ，這將為您提供當前更新的值

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 可以通過三種方式調用

第一

不傳遞一個 deps 數組

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

當props發生變化時，您需要添加一個useEffect來更新state 。

從useState文檔：

在后續重新渲染期間，useState 返回的第一個值將始終是應用更新后的最新 state。

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])

   // 
}