当父母更新它时，孩子的道具不会更新它是 state

Question

我在这上面花了几天时间，现在快把我逼疯了。

我在父组件中有一个 state，其中包含一个选定方块的 Array[string]，它与钩子中的集合 function 一起传递给子组件（地图）。 问题是，当我设置新方块时，它们在父级中发生了变化，但在选择另一个方块时，它没有考虑到已经选择的方块。

function Parent(props){
    const [selectedSquares, setSquares] = useState([]);
    
    useEffect(() => {
        console.log('parent useEffect', selectedSquares);
    }, [selectedSquares]);
    
    return (
        <Child selectedSquares={selectedSquares}
               handleSquaresChange={setSquares}
        />
    )
}

function Child(props){
   const {selectedSquares, handleSquaresChange} = props;

    useEffect(() => {
        console.log('child useEffect', selectedSquares)
    }, [selectedSquares]);

    const handleSelect =  evt => {
        if(evt.target){
           const features = evt.target.getFeatures().getArray();
           let selectedFeature = features.length ? features[0] : null;
           if (selectedFeature) {
               console.log('select (preadd):', selectedSquares);
               const newTile = selectedFeature.get('TILE_NAME');
               const newSquares = [...selectedSquares];
               newSquares.push(newTile);
               const newTest = 'newTest';
               handleSquaresChange(newSquares);
               console.log('select (postadd):', newSquares);
        }
    }
    
    return(
        <Map>
            <Select onSelect={handleSelect}/>
        </Map>
    )
}

在第一个 interactionSelect 组件上，我从控制台得到这个 output：

parent useEffect: [] ,

child useEffect: [] ,

select (preadd):[] ,

child useEffect:['NX'] ,

parent useEffect: ['NX'] ,

select (postadd): ['NX'] 。

进行第二个选择，将其添加到控制台：

select (preadd):[] ,

select (postadd): ['SZ'] ，

child useEffect:['SZ'] ,

parent useEffect: ['SZ'] 。

Answer 1

原来我正在使用的库中有一个 addEventListener 出错了。 感谢所有做出回应的人，但事实证明问题不在于 React 或 state 之类的东西。

Answer 2

考虑类似下面的代码。 你的父母有一个包含你所有选项的数组。 对于每个选项，您都渲染一个子组件。 子组件处理它自己的 state 的活动。

function Parent(props){
    // array of options (currently an array of strings, but this can be your squares)
    const allOptions = ['opt 1', 'opt 2', 'opt 3', 'etc']; 
     
    return (
        <>
            // map over the options and pass option to child component
            {allOptions.map((option) => <Child option={option}/>)} 
        </>
    )
}

function Child({ option }){
    const [selected, setSelected] = useState(false); // default state is false
     
    return (
        <>
            // render option value
            <p>{option}</p> 
            // shows the state as selected or not selected
            <p>Option is: {selected ? "selected" : "not selected"}</p> 
            // this button toggles the active state
            <button onClick={() => setSelected(!selected)}>Toggle</button>
        </>
    )
}