如何从子组件更新 props.data？

Question

我正在尝试显示传递给子项的数组的范围。我目前的Parent组件如下：

import data from './data.json'
return ( 
    <Cell symbol={data.symbol} number={data.number} />
)

并且该数据正在传递到我的子组件中：

const [updatedSymbols, setUpdatedSymbols] = useState()

useEffect(() => 
    if(props.number === 1 || props.number === 2 || props.number === 3 ){
             setUpdatedSymbols(props.number)
            console.log("updated: " + props.number)
        }
    }, [props.symbol])

return (
    <div class="cell">
        {updatedSymbols}
    </div>
)

问题： 如果你看一下 useEffect，你会注意到在 if 语句中，我 selecting 我想要的数字并简单地传递它们进入 useState，“setUpdatedSymbols”。我的问题是我需要 select 的数字太多，大约 100 个，如何在不使用 || 的情况下将它们全部推入 updatedSymbols ？

Answer 1

无论您在插入状态之前要检查的数字列表是什么，您都可以共同执行此操作

    const [updatedSymbols, setUpdatedSymbols] = useState()
    const range = (from, to ) => {
       var collection = [];
       for(let i = from; i<=to ; i++) {
         collection.push(i);
       }
    return collection;
   }
    useEffect(() => 
        if(range(1,100).includes(props.number) ){
                 setUpdatedSymbols(props.number)
                console.log("updated: " + props.number)
            }
        }, [props.symbol])
    
    return (
        <div class="cell">
            {updatedSymbols}
        </div>
    )

    // this is magical trick
    // [1,2,3,4,5].includes(props.number); //if props.number happens to be in the array then it i'll give true

如何从子组件更新 props.data？

How can I update the props.data from a child component?

javascript

arrays

reactjs

react-hooks

use-state