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 状态更新是异步的，并在后台批量应用。

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

例如：

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

console.log(results);

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

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

你也可以将你的内容放在console.loga 中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更改时被调用，而不是在每次渲染时被调用。