为什么不正确更新我的状态？[副本]

Question

我通过使用map函数迭代来显示我的状态，这是一个数组。此外，我有一个按钮，在点击反转数组。

import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
import "./App.css";

const App = (props) => {
  const [reverse, setReverse] = useState(false);

  const [arr, setArr] = useState([]);

  useEffect(() => {
    let newArr = props.arr;

    newArr = newArr.reverse();

    setArr(newArr);
  }, [reverse, props.arr]);

  return (
    <div className="App">
      <button
        onClick={() => {
          setReverse(!reverse);
        }}
      >
        Reverse
      </button>
      {arr.map((e, i) => {
        return (
          <div key={i}>
            <p>{e}</p>
          </div>
        );
      })}
    </div>
  );
};

App.propTypes = {
  arr: PropTypes.array,
};

export default App;

我认为我想做什么是相当明显的。但这对我不起作用，我不知道为什么。我必须单击两次来完成第一次还原，出现了奇怪的情况，即呈现的数组和Chrome中React开发工具在组件状态中显示的数组不匹配。

我无法解释这种行为。我开始认为这与我从道具中获得阵列有关，但我真的不知道。有什么想法吗？

Answer 1

主要错误是您将道具分配给newArr变量，而不是arr，因此每次都不是arr的新状态被反转，而是props的原始数组。另外，在更改道具时，最好再添加一个useffect。我在下面提供了一个正确代码的示例。如果有错误，我道歉，我的英语说得不好

  useEffect(() => {
    setArr(props.arr);
  }, [props.arr]);

  useEffect(() => {
    if (!arr.length) return;

    let newArr = arr.length ? [...arr] : [...props.arr];
    newArr = [...newArr.reverse()];
    setArr(newArr);
  }, [reverse]);

Answer 2

这是因为useffect（）钩子在组件的挂载上运行并反转数组，尽管您没有单击反转按钮。

尝试添加逻辑以避免挂载上发生的第一次反转。

这可能对你有用，

  useEffect(() => {
      if(arr.length>0){
         let newArr = props.arr;
         newArr = newArr.reverse();
         setArr(newArr);
      }
  }, [reverse, props.arr]);

Answer 3

有几个改进要做。有些是bug，有些只是反模式。

首先要注意的是，反向改变了原始数组。你不应该在React中改变状态或道具。

第二种是反模式，涉及将道具复制到不需要复制的状态。

React文档说状态是指随时间变化的值。它说如果一个值可以从道具中导出，它就不是状态。

你能根据组件中的任何其他状态或道具来计算它吗？如果是这样，那就不是国家。

这就是我们在本案中的情况。

与其将proparr复制到状态并在那里反转，我们可以只使用prop和一个临时变量以更少的代码完成相同的目标。

const {useState, useEffect} = React;

const App = (props) => {
  const [reverse, setReverse] = useState(false);
  
  let array = [...props.arr]; // New reference so we will not mutate props
  if (reverse) {
    array.reverse();
  }

  return (
    <div className="App">
      <button
        onClick={() => {
          setReverse(!reverse);
        }}
      >
        Reverse
      </button>
      {array.map((e, i) => {
        return (
          <div key={i}>
            <p>{e}</p>
          </div>
        );
      })}
    </div>
  );
};

ReactDOM.render(<App arr={[1,2,3]} />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>