ReactJS:无法从动态创建的同级组件访问最新的父状态值

Question

如何在多个动态创建的子组件之间共享最新的父状态值？

组件A创建一个组件B的数组，并将其存储在状态(数组变量(中。组件B有一个按钮，用于打印a的状态长度。在这里，每个组件B打印不同的值。他们无法访问最新的A状态。

A:

const A = () => {
const [bList, setBList] = useState([]);
const [stateLength, setStateLength] = useState(0);
const addB = () => {
let temp = <B state={printStatelength} />
bList.push(temp)
setBList([...bList]);
}
const printStatelength = () => {
setStateLength(bList.length)
}
return (<>
<button onClick={addB}>Add B</button>
{stateLength}
{bList}
</>);}

B:

const B = (props) => {
return (<button onClick={props.state} >print</button>);
}

代码沙箱链接

Answer 1

这是因为您在组件A中呈现bList的方式。当您按照现有方式执行时，通过从bList数组中提取，该数组中的每个元素(即组件B的每个实例(似乎都有不同的bList.length值。因此，根据您按下的按钮，您会得到不同的值。

如果在bList上进行映射，并为数组中的每个元素渲染一个B组件，则会得到所需的结果。换句话说，将组件A中的return语句更改为：

return (
<>
<button onClick={addB}>Add B</button>
{stateLength}
{bList.map(() => (
<B state={printStatelength} />
))}
</>
);