reactjs 更新依赖于挂接提供的另一个状态的状态

g0czyy6m 于 2023-02-15 发布在 React

关注(0)|答案(1)|浏览(142)

我有一个代码类似于下面：

const Example = (props) => {
    //custom hook that returns a country name selected by user
    { selectedCountry, setSelectedCountry } = useSelectedCountry(); 
    const [country, setCountry] = useState();
    const countryList = props.countryList;

    return(
        <Box>
            <label htmlFor='country'>Country</label>
                <Select 
                    sx={{ m: 1, width: inputSelectWidth, mt: 3, height: 35, ml: 12 }}
                    value={country}
                    onChange={(e) => { setCountry(e.target.value); } }
                >
                    {
                         countryList.map(country => {
                         return (
                             <MenuItem 
                                  value={country.countryName}
                                  key={country.countryID}
                             >
                                  {country.countryName}
                             </MenuItem>
                         );
                         })
                    }
                </Select>
        </Box>
    );

}
export default Example;

我需要country在selectedCountry改变时改变。但是selectedCountry在另一个组件中更新。如果我在这个组件中console.log(selectedCountry);，它会在我每次从其他组件中选择不同的国家时更新。
尽管country应该在selectedCountry改变时改变，但是country可以有它自己的值。

selectedCountry: A, country: A
selectedCountry: B, country: B
selectedCountry: B, country: C
selectedCountry: B, country: D

我尝试了value={selectedCountry}，但是country和selectedCountry的值总是相同的。我需要实现上面的场景。
我不知道该怎么做。有什么主意吗？

reactjs

来源：https://stackoverflow.com/questions/75432763/update-a-state-that-depends-on-another-state-provided-by-a-hook

1条答案

按热度按时间

xu3bshqb1#

你可以使用React.useEffect钩子来设置你所需要的行为，在你的Example组件中代码可能看起来像这样：

React.useEffect(() => {
  // This function will be executed each time the `country` is changed
  // like in the `Select` component.
}, [country]};

React.useEffect(() => {
  // This function will be executed each time the `selectedCountry` is
  // changed, probably outside the `Example` component.
}, [selectedCountry]};

React.useEffect(() => {
  // This function will be executed each time either `country`
  // or `selectedCountry` is changed.
}, [country, selectedCountry]};

使用你认为最好的选项，并将所需的逻辑放入函数中，不要忘记在文件的开头导入React或useEffect钩子。
更多关于React docs的内容：https://reactjs.org/docs/hooks-effect.html.

赞(0）回复(0）举报 2023-02-15

我来回答

reactjs 更新依赖于挂接提供的另一个状态的状态

1条答案

相关问题

热门标签

最新问答