如何從子組件更新 props.data？

Question

我正在嘗試顯示傳遞給孩子的數組的范圍。 我當前的父組件如下：

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 語句中，我正在選擇我想要的數字並將它們簡單地傳遞到 useState，“setUpdatedSymbols”。 我的問題是我需要的數字太多了 select，大約 100 個，我如何在不使用 || 的情況下將它們全部推入 updatedSymbols？

Answer 1

無論您在插入 state 之前要檢查的號碼列表是什么，您都可以共同執行此操作

    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