Question

我确定这只是我对React的缺乏了解，但是我正在尝试让一个组件在状态更新后（异步发生）进行更新。

const [appState, setAppState] = useState({
        countries: null,
        languages: null
    })
useEffect(() => {
        const languageURL = `//localhost:8080/languages`,
              countryURL = '//localhost:8080/countries';
        axios.get(languageURL, {
            headers: {'Access-Control-Allow-Origin': '*'}
        })
            .then((langResponse) => {
                    const languages = langResponse.data.map(l => ({
                        value: l.id,
                        label: l.language + " (" + l.code + ")"
                    }))
                    setAppState({languages: languages});
                    console.log("updating languages");
                    return languages;
                }, (error) => {
                    console.log(error)
                }
            );
        axios.get(countryURL, {
            headers: {'Access-Control-Allow-Origin': '*'}
        })
            .then((countryResponse) => {
                    const countries = countryResponse.data.map(l => ({
                        value: l.id,
                        label: l.name + " (" + l.code + ")"
                    }))
                    setAppState({countries: countries});
                    console.log("updating countries");
                    return countries;
                }, (error) => {
                    console.log(error)
                }
            );
    }, [setAppState]);

我的组件看起来像这样（每个对象集都有一个）：

<Select
  options={appState.countries}
  isSearchable
/>

我已验证数据是否下降以及与格式是否匹配。问题似乎是当提供的状态对象更新时，每个Component都没有渲染-只有一个正在拾取更改。似乎无论哪个先解决，另一个都是空的。几乎与this question相反-他们正在立即更新，在另一个集合被解决之前。

Answer 1

如果您不想将其设置在一起，我认为您应该将状态分开。我对其进行了测试，但分别设置时出现错误，我认为最好将其分开，并在需要时为每个状态编写useEffect

Answer 2

好的，是的，答案似乎是创建单独的状态对象并相应地更新每个状态对象。实际上，Garrett Motzner和tmohammad78在说什么。我认为，这使依赖于它们的组件可以看到状态离散。看起来像这样：

const [countries, setCountries] = useState();
const [languages, setLanguages] = useState();

useEffect(() => {
    ...
    setLanguages(languages);
    ...
    setCountries(countries);
    ...
 }, [setLanguages, setCountries]);

如果这是一个较大的组件，那么react-hooks-accessor-state可能是一个好方法。

为什么我的React useState不更新我的组件？

2 个答案: