如何在数组上使用 useState 和 useEffect

Question

在下面的代码中，我有几个文本区域，用户应该在其中输入 json。

我尝试使用和数组（好吧，object 带有数字键，只是为了方便 rest 运算符分配），我还想避免在每次更改时都解析两个 JSON。

它运行良好，除了对于第一个渲染，我只在第二个 json 上得到验证。我很确定它归结为 scope，旧值存储在 useEffect 中，但我添加了 setErrors 的回调版本并且没有工作。

我做错了什么，正确的模式是什么？

PS：当然，我打算将每个文本区域移动到单独的组件中，但我想先了解这里出了什么问题。

 const [jsons, setJsons] = useState<{ [k: number]: string }>({ 0: '', 1: '' }); const [containers, setContainers] = useState<{ [k: number]: object }>({ 0: {}, 1: {} }); const [errors, setErrors] = useState<{ [k: number]: string }>({ 0: '', 1: '' }); const useContainerEffect = (index: number) => { useEffect(() => { let container = {}; try { container = JSON.parse(jsons[index]); setErrors(() => ({...errors, [index]: '' })) } catch (e) { setErrors(() => ({...errors, [index]: VALUE_IS_NOT_JSON })) } setContainers(() => ({...containers, [index]: container })) }, [jsons[index]]); } useContainerEffect(0); useContainerEffect(1); const jsonInputChange = (e: HTMLTextAreaElement, i: number) => { setJsons({...jsons, [i]: e.value }) }

Answer 1

尝试使用useState的功能形式来设置错误。 另外，最好不要在依赖项数组中使用复杂的依赖项，这样它们就可以被静态检查：

  const useContainerEffect = (index: number) => {
    useEffect(() => {
      let container = {};
      try {
        container = JSON.parse(jsons[index]);
        setErrors((err) => ({ ...err, [index]: '' }));
      } catch (e) {
        setErrors((err) => ({ ...err, [index]: 'VALUE_IS_NOT_JSON' }));
      }
      setContainers(() => ({ ...containers, [index]: container }));
    }, [index]);
  };