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.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更改时才会被调用，而不是在每个渲染时都被调用。

useState根本不更新数组

1 个答案: