Question

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

父组件

iframe

子组件

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选项将显示在控制台中

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

您应将“子级”组件更改为uncontrolled component。

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

2 个答案: