useState 根本不更新数组

Question

我正在尝试使用从子组件接收的输入，使用 React Hooks 更新数组的状态。

这是我尝试更新的数组的代码（在我的 App.js 文件中）：

 const [results, setResults] = useState([]);

  const submitHandler = newResult => {
    const newArray = [...results, newResult];
    setResults(newArray);
    console.log(newArray);
    console.log(results);
  }

newArray 已正确更新和记录，其中包含通过子组件提交的所有项目。但是results 的状态永远不会更新，它总是记录一个空数组。应该注意的是，我的应用程序中的其他 useState 挂钩工作正常，只有我用于该数组的那个挂钩不起作用。有谁知道可能出了什么问题以及如何解决？

如果有帮助，这是从子组件 (Shorten.js) 提交项目的代码 - 这些钩子工作得非常好：

    const [urlInput, setUrlInput] = useState("");
    const [error, setError] = useState(false);

    const changeHandler = event => {
        setUrlInput(event.target.value);
    }

    const submitHandler = event => {
        event.preventDefault();

        if (urlInput === "") {
            setError(true);
        }
        else {
            setError(false);

            axios.post("https://rel.ink/api/links/", {
                url: urlInput
            })
                .then(response => {
                    const newResult = {
                        original: urlInput,
                        shortened: "https://rel.ink/" + response.data.hashid
                    }

                    props.submit(newResult);
                })
                
            setUrlInput("");
        }
    }

Answer 1

在您的示例中，您不能保证 results 状态已在您的 console.log(results) 处更新。这是因为 React 状态更新是异步的，并且是在后台批量应用的。

如果您在const [result, setResults] = useState([]) 下调用了console.log，那么它将在每次渲染过程中被调用，因此一旦setState 函数应用了您的新状态，您应该会看到更新后的值被注销。

例如：

const [results, setResults] = useState([]);

console.log(results);

const submitHandler = newResult => {
  const newArray = [...results, newResult];
  setResults(newArray);
  console.log(newArray);
}

应该在下一次渲染过程中记录你的新状态。

你也可以把你的 console.log 放在一个 useEffect 中，这会让你知道 React 知道你的 results 已经改变了。

const [results, setResults] = useState([]);

useEffect(() => {
  console.log(results);
}, [results);

const submitHandler = newResult => {
  const newArray = [...results, newResult];
  setResults(newArray);
  console.log(newArray);
}

这意味着您的console.log(results) 只会在results 更改时被调用，而不是在每次渲染时调用。