Javascript 从子级发送到父级的道具返回最后一个值

我将道具从子组件传递到父组件，但在父组件中得到的值是最后发送的值

父组件

const Page = () => {
    const optionsList = ['All', 'Web', 'App', 'Animation', 'Icons'];
    const [selectedOption, setSelectedOption] = useState('All');
    let selected = (value) => {
        setSelectedOption(value);
        console.log(selectedOption)
    }
    return (
        <Layout>
            <div className="container">
                <Options options={optionsList} selected={selected}/>
                {designType}
            </div>
        </Layout>
    );
}

const Page=（）=>{
const optionsList=[“全部”、“网络”、“应用”、“动画”、“图标”]；
const[selectedOption，setSelectedOption]=useState（'All'）；
让选定项=（值）=>{
设置选择选项（值）；
console.log（已选择选项）
}
返回(
{designType}
);
}

子组件

const Options = ({options, selected}) => {
    const [isDropDownVisible,
        setIsDropDownVisible] = useState(false);
    const [selectedOption,
        setSelectedOption] = useState('All');
    return <div className="dropdown">
        <div className="select" onClick={e => setIsDropDownVisible(!isDropDownVisible)}>
            <span>{selectedOption}</span>
        </div>
        {isDropDownVisible && <ul className="options">
            {options.map((option, index) => (
                <li
                    key={index}
                    onClick={() => {
                        setSelectedOption(option);
                        setIsDropDownVisible(!isDropDownVisible);
                        selected(selectedOption);
                }}>{option}</li>
            ))
}
        </ul>}
    </div>;
}

constoptions=（{Options，selected}）=>{
常量[isDropDownVisible，
setIsDropDownVisible]=useState（false）；
const[selectedOption，
setSelectedOption]=useState（“全部”）；
返回
setIsDropDownVisible（！isDropDownVisible）}>
{selectedOption}
{isDropDownVisible&&ul className=“选项”>
{options.map（（选项，索引）=>(
{
设置选择选项（选项）；
setIsDropDownVisible（！isDropDownVisible）；
已选择（已选择选项）；
}}>{option}
))
}
}
;
}

---

如果

All

是当前选择的选项，则将对其进行控制台操作，而不是新选择的选项

Animation

，如果选择

App

，则控制台中将显示

Animation

选项。

确定，在这里再次粘贴我的注释：因为useState是一个异步函数，并且在调用回调函数时，不保证状态会更新。您应该使用useRef，或者最好不要在子对象中复制

useState

，因为您已经将所有需要的内容传递给了子对象

const Options = ({options, selected}) => {
    const [isDropDownVisible, setIsDropDownVisible] = useState(false);

    return (<div className="dropdown">
        <div className="select" onClick={e => setIsDropDownVisible(!isDropDownVisible)}>
            <span>{selectedOption}</span>
        </div>
        {isDropDownVisible && 
          <ul className="options">
            {options.map((option, index) => (
                <li
                    key={index}
                    onClick={() => {
                        setIsDropDownVisible(!isDropDownVisible);
                        selected(option);
                }}>{option}</li>
            ))
          }
        </ul>}
    </div>);
}

constoptions=（{Options，selected}）=>{
常量[isDropDownVisible，setIsDropDownVisible]=useState（false）；
返回(
setIsDropDownVisible（！isDropDownVisible）}>
{selectedOption}
{isDropDownVisible&&

{options.map（（选项，索引）=>(
{
setIsDropDownVisible（！isDropDownVisible）；
选定（可选）；
}}>{option}
))
}
}
);
}

您应该将子组件更改为。

因为

useState

是一个异步函数，在调用回调函数时，不保证状态会更新。您应该使用

useRef

，或者最好不要在child中复制

useState

，因为您已经将所有需要的东西传递给了child