useEffect 不允许我更新组件内的数组答案

【问题标题】：useEffect does not allow me to update an array inside my componentuseEffect 不允许我更新组件内的数组
【发布时间】：2021-06-09 05:04:24
【问题描述】：

我有两个问题，第一个是我想将一个对象数组从父组件传递到子组件，如下所示：

function DropdownSome ({options, placeholder, someNum}) {
   const [value, setValue] = useState (options)

    return (
           <Dropdown as = {ButtonGroup}>
                  <Dropdown.Toggle as = {CustomToggle}>
                        {placeholder}
                  </Dropdown.Toggle>
                  <Dropdown.Menu as = {CustomMenu}>
                      {value.map ((r, index) =>
                          <Dropdown.ItemText key = {r.id}>
                                 <Counter 
                                   index={index}
                                   someNum={someNum}
                                   ...
                                 />
                          </Dropdown.ItemText>
                       )}
                   </Dropdown.Menu>
            </Dropdown>
       )
}
export default DropdownSome;

这里我无法使用 useState（钩子）设置数组，因为它没有完成传递我的常量值。然后使用 useEffect 钩子解决这个问题，如下所示：

 useEffect (() => {
        setValue (options); // this worked to pass options in value
    }, [options])

然后我能够将我的数组传递给我的 const 值，并且我能够在我的子组件中使用值。在这个组件中，我需要在我的数组中设置一个值 (setValue (array[someIndex].qty= someNum))。我现在的第二个问题是 useEffect 钩子总是将我的数组的值更新为其初始状态，这不允许我在我的子组件中更新我的数组 (array[someIndex].qty // 总是设置为初始值）。我只试过像这样运行 useEffect 一次：

useEffect (() => {
        setValue (options); // this doesn't work to pass options in value
    }, [])

但是这样做，我的数组再次无法传递给我的常量值，我觉得我被困在这里了。我还尝试清除 useEffect 以便 setValue 只运行一次，但 useEffect 不断将我的变量设置为其初始状态。

useEffect (() => {
        const counterInterval = setInterval (() => {
            setValue (options);
        });

        return () => clearInterval (counterInterval);
    }, [options]);

我是新手，一些钩子生命周期主题需要一些时间才能理解，但我希望有人经历过类似的事情，可以为我提供建议。

【问题讨论】：

你想去哪里setValue(array[someIndex].qty= someNum)？将传递的 props 存储在本地组件状态中通常是一种 React 反模式（正如@hellogoodnight 指出的那样），但是这将门选项留给您似乎仍然想要 update 选项值。 options 作为真相的来源生活在哪里？您想在哪里更新它？

标签： javascript arrays reactjs

【解决方案1】：

据我所知，您不需要为您的组件使用 useState 或 useEffect 。只需这样做：

function DropdownSome ({options, placeholder, someNum}) {


    return (
           <Dropdown as = {ButtonGroup}>
                  <Dropdown.Toggle as = {CustomToggle}>
                        {placeholder}
                  </Dropdown.Toggle>
                  <Dropdown.Menu as = {CustomMenu}>
                      {(options || []).map ((r, index) =>
                          <Dropdown.ItemText key = {r.id}>
                                 <Counter 
                                   index={index}
                                   someNum={someNum}
                                   ...
                                 />
                          </Dropdown.ItemText>
                       )}
                   </Dropdown.Menu>
            </Dropdown>
       )
}
export default DropdownSome;

添加|| [] 是为了处理组件挂载时未设置选项的情况（我假设您正在尝试使用挂钩处理该问题）。

【讨论】：

【解决方案2】：

这不是很清楚，但是猜测您想从父级获取选项数组，然后将其存储为值以仅修改父级中的值和选项以保持不变。在这种情况下，您可以尝试使用空数组初始化值。 const [value, setValue] = useState ([]); 然后在 useEffect 仅当 value.length=0 时更新值像这样：

useEffect (() => {
        if (value.legth===0) setValue(options); 
    }, [options])

如果您需要在值更改时修改选项而不是检查 abt 回调。

【讨论】：