从子到父母返回最后一个值的道具

Question

我正在将道具从孩子传递到父母组件，但是我在父零件中获得的值是最后一个发送的值。

父部件

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 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>;
}

如果All是当前选项的选项，则它将被安装而不是新选择的选项Animation，如果选择了App，则Animation选项将显示在Console中。

Answer 1

好吧，在这里再次粘贴我的评论：因为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>);
}

Answer 2

您应该将子组件更改为不受控制的组件。