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

Question

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

我试过使用展开运算符

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

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

此外，我尝试在 setState 中初始化可见的属性，但它总是 returns 未定义。

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，但似乎无法使其与可见一起使用。

EDIT/PROBLEM 已解决

在与 Junius 交流之后，我调整了我的代码。为我修复它的是设置一个变量，其中包含我想要的每个数组元素的所有属性，将它们添加到数组，然后使用展开运算符将整个数组设置为状态。

        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

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

state = {
    visibleRegions: {}
}

使区域可见非常简单，只需定义属性并将区域作为键

visibleRegions[region] = true;

条件 !visibleRegions[region] 将涵盖 undefined 和 false ... !!visibleRegions[region] 可见状态。

Answer 3

我是用checkbox做的，你可以根据自己的喜好去适应任何元素，原理是一样的，不知道是不是你要的，不知道有没有你的问题，但我希望至少它能给你一个想法。从你的道具中取出你的数组const {myData} = this.props祝你好运:)

`

class Geo 扩展组件 { 状态={ 可见：假的， uniqueRegions: ['Asia', 'America', 'Europe', 'Africa', 'Oceania', 'Polar'] };

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 中的每个元素初始化状态

How to Initialize State for each Element in Array ReactJS

state

initializing

reactjs