Question

React和构建地理应用程序的新手。我有很多大洲 uniqueRegions = ['Asia', 'America', 'Europe', 'Africa', 'Oceania', 'Polar']在我的道具中为this.props.uniqueRegions。在我的组件中，我想在每个大洲上设置属性visible的状态。我可以对其进行硬编码，但是我不想这样做。我怎么可能做到这一点？

我尝试像这样使用传播算子

state = {
  [ ...this.props.uniqueRegions]: {visible: 5}
    };

但这显然是不正确的语法。

此外，我尝试在setState中初始化visible属性，但它始终返回undefined。

loadMore = (region) => {
        console.log(this.state[region])
        if(this.state[region])
        this.setState(prevState => ({
            [region]: {visible: 5}
        }))
    }

下面是如何传递我的区域数据并将其当前设置为州。

filterRegion = (region) =>{
        if(region !==undefined ){
            this.setState({
                [region]: {countries: ['']}
            })
          return Axios
           .get('https://restcountries.eu/rest/v2/region/' + region)
           .then(res => {
             if(res.status === 200 && res !== null){
              this.setState(prevState =>({
                [region]: {...prevState[region],
                    countries: (res && res.data || [])} 
              }))
              } else {
               throw new Error('No country found');
             }
             })
             .catch(error => {
               console.log(error)
               return []
             });
         };
        };

    loadMore = (region) => {
        console.log(this.state[region])
        if(this.state[region])
        this.setState(prevState => ({
            [region]: {visible: 5}
        }))
    }

    render(){
        const handleRegion =(region) =>{
            this.filterRegion(region);
            if(this.state[region] && this.state[region].open){
                this.setState(prevState =>({
                    [region]: {...prevState[region],
                        open: false
                    }
                  }))
            } else {
                this.setState(prevState =>({
                    [region]: {...prevState[region],
                        open: true
                    }
                  }))
            }
        }

我已经能够在特定区域（即[region] .open）上设置属性，但似乎无法使其在可见状态下起作用。

已解决编辑/问题

与Junius来回交流后，我调整了代码。对我来说，解决此问题的方法是设置一个变量，该变量包含我想要的每个数组元素的所有属性，将它们添加到数组中，然后使用spread运算符将整个数组设置为状态。

        if (!regions) {
            console.log('no regions')
          return;
        }
        if(regions) 
        console.log(regions);
        const regionsState = {};

        regions.forEach((region, index) => {
            if(this.state[region] && this.state[region].countries[0]){
                regionsState[region] = { visible: 5, countries: this.state[region].countries, open: false};
            } else {
                this.filterRegion(region);
                regionsState[region] = { visible: 5, countries: [], open: false};
            }
        });

        // set state here outside the foreach function
         this.setState((prevState => ({
           ...regionsState
         })))
      };

最后，我无法正确初始化数据。最初，我是通过单击来加载数据的，但这既不理想，也不现实。在加载道具后，不会在 componentDidMount 中运行代码。对我来说，解决方案是在 componentDidUpdate 中运行该功能。我的状态现在可以正确初始化。再次感谢Junius的帮助！

Answer 1

创建一个新对象，并将每个区域作为属性添加到该对象。

setDynamicRegions = regions => {
  if (!regions) {
    return;
  }

  const regionsState = {};

  regions.forEach((item, index) => {
    regionsState[item] = { visible: 0 };
  });

  //   this.setState({
  //     regionsState: regionsState
 //   });
};

const uniqueRegions = [
    "Asia",
    "America",
    "Europe",
    "Africa",
    "Oceania",
    "Polar"
    ];

    const setDynamicRegions = regions => {
    if (!regions) {
        return;
    }

    const regionsState = {};

    regions.forEach((item, index) => {
        regionsState[item] = { visible: 0 };
    });

    //   this.setState({
    //     regionsState: regionsState
    //   });
    console.log(regionsState);
    };

    setDynamicRegions(uniqueRegions);

Answer 2

您可以在状态下使用一个简单的空对象：

let a;
if (b)
  a = b;
else
  a = {x: 0, y: 1};

要使区域可见，就像定义以键为区域的属性一样简单

state = {
    visibleRegions: {}
}

条件visibleRegions[region] = true;将覆盖!visibleRegions[region]和undefined ... false的可见状态。

Answer 3

我用一个复选框完成了此操作，您可以根据需要对它进行任何调整，这是相同的原理，我不知道这是否是您要查找的内容，因为我不确定是否收到您的问题，但我希望至少它能给您一个主意。从道具const {myData} = this.props中走运吧：）

`

Geo类扩展了组件{ 状态= { 可见：错误， uniqueregions：['亚洲'，'美国'，'欧洲'，'非洲'，'大洋洲'，'波兰'] };

handleChecked = () => {
    this.setState({
        visible: !this.state.visible
    });
};
render() {
    const { uniqueRegions } = this.state;
    return (
        <div>
            <input type="checkbox" onChange={this.handleChecked} value={uniqueRegions} />

            {uniqueRegions.map(region => {
                if (this.state.visible) {
                    return (
                        <p>
                            these are my regions {region}
                        </p>
                    );
                } else {
                    return null;
                }
            })}
        </div>
    );
}

}

导出默认地理位置； `

如何为数组ReactJS中的每个元素初始化状态

3 个答案: