Question

我正在开发一个电子商务应用程序，需要显示尺寸，颜色等产品选项。

这些选项是动态地来自API。

我正在使用react native的Picker组件来显示选项值，以便用户可以选择一个值。

现在的问题是我选择一个值，它不能反映在选择器值中，因为我不知道如何动态定义选择器的状态变量。

以便在调用选择器onchangevalue时可以更新状态值。

初始状态如下：

state = {
        options: {}
    }

现在，我希望这应该为该空白对象动态添加选项，这样它将看起来像这样：

state = {
        options: {
            Size: '0.5"',
            Colour: 'White Dudhiya'
        }
    }

然后在创建它之后，如何在其他任何函数中访问这些状态变量。

如果我朝错误的方向前进，请纠正我，并分享实现此目标的正确方法。

如果您需要我的更多信息，请告诉我。

任何帮助表示赞赏。

谢谢

编辑：

这是我动态呈现产品选项及其值的方式：

renderOptions(data) {

        if (data.options.length > 0) {
            var allOptions = data.options.map((item) => {
                if (item.product_option_value.length > 0) {
                    return (
                        <View key={item.option_id} style={{ marginLeft: 10, marginRight: 10, marginBottom: 15, width: windowWidth - 20 }}>
                            <MyAppText>{item.name}</MyAppText>
                            <View style={{ borderWidth: 1, borderColor: '#E8E8E8', marginTop: 5, height: 50 }}>
                                <Picker
                                    selectedValue={this.state.options[item.name]}
                                    style={{ height: 50, width: '100%' }}
                                    onValueChange={(itemValue, itemIndex) => 
                                        this.setState(() => {
                                            key = item.name;
                                            return {key: itemValue};
                                        })
                                    }
                                    >
                                        {this.renderOptionValues(item)}
                                </Picker>
                            </View>

                        </View>
                    );
                } else {
                    return;
                }
            });
            return allOptions;
        }
    }

renderOptionValues(option) {
        if (option.product_option_value.length > 0) {
            return (option.product_option_value.map((optionValue) => {
                return (
                    <Picker.Item key={optionValue.option_value_id} label={entities.decode(optionValue.name)} value={optionValue.option_value_id} />
                );
            }));
        }

    }

我在我的render（）函数中调用renderOptions（）函数。

Answer 1

根据https://stackoverflow.com/a/35398253/2083099，我相信您需要这样的内容，

os.path.abspath()

Answer 2

看看下面的实现，我只是尝试了一些假设值，并且效果很好。

class DynamicOptions extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  renderOptions = (options = []) => {
    return options.map(option => {
      return <Picker.Item label={option.label} value={option.value} key={option.key}/>
    });
  }

  render() {
    const {
      options
    } = this.props;
    console.log(this.state);
    return ( <
      View style = {{ flex: 1 }} >
      {
        options.map((item, index) => {
          return (
      <View style={{flex: 1}}>
        {
          options.map((item, index) => {
            return (
              <View key={`item-${index}`}>
                <Text>{item.name}</Text>
                <Picker
                  selectedValue={this.state[item.name]}
                  style={{ height: 50, width: '100%' }}
                  onValueChange={(listItem, index) => {
                    this.setState({
                      [item.name]: listItem
                    });
                  }}
                >
                  { this.renderOptions(item.options) }
                </Picker>
              </View>
            )
          })
        }
      </View>
    )
  }
}

export default DynamicOptions;

以下是我用来渲染选项的数据（我不确定您使用的是什么数据）

const options = [
  {
    name: 'Color',
    options: [{label: 'Red', value: 'Red', key: 'Red'}, {label: 'Green', value: 'Green', key: 'Green'}]
  },
  {
    name: 'Size',
    options: [{label: '1', value: '1', key: '1'}, {label: '2', value: '2', key: '2'}]
  }

];

这就是我调用该函数的方式

<DynamicOptions options={options}/>

希望这会有所帮助！

如何在React Native中动态设置状态键值对？

2 个答案: