Question

我使用react native CRNA创建了我的应用，我想显示数组中的文本。我希望文本更改取决于所选的选择器，因此索引与选择器键相同。

这是我的代码段

export default class App extends React.Component {
  constructor(props){
        super(props);
        this.state ={
            branches: [],
        }
    }
  componentDidMount(){
    fetch('someURL', {
            method: 'GET',
        })
      .then((response) => response.json())
      .then((responseJson) => {
          this.setState({
          cabang: responseJson.data,
          loading: true,
          })
          responseJson.forEach((item)=>{
          this.state.cabang.push({
           branch_id:item.branch_id,
           name: item.name,
           address: item.address,
          })
          })
          branches.map((items)=>{console.log(item.name)})
          console.log(responseJson);
          return responseJson;
      })
        .catch(error=>{
            console.log(error);
        });
    }
  render() 
  {
    const branchesName = this.state.branches.map((item, branch_id)=> {
      return(
        <Text>{item.name}</Text>)
    });
    const branchesPicker = this.state.branches.map((item, branch_id)=> {
      return(
            <Picker.Item
            label={item.name}
            value={item.name}
            key={this._keyExtractor}/>
        )
    });
    return (
      <Text>{branchesName}</Text>
      <Picker selectedValue={this.state.branches.name}
          mode="dropdown"
          style={{ height: 50, justifyContent: 'space-around', flex:4, alignItems: 'stretch', }}
          onValueChange={(item, branch_id)=> this.setState({name: item})}>
      {branchesPicker}
      </Picker>
    );
  }
}

我尝试了这段代码，但结果却不是一一显示出数组中的所有数据。我很想找到一种方法来根据所选的选择器逐一显示它...有人可以帮助我吗？

非常感谢你。

Answer 1

在渲染方法中，您正在映射数组列表并返回<Text>元素的数组。

const branchesName = this.state.branches.map((item, branch_id)=> { return( <Text>{item.name}</Text>) });

如果只想显示选定的数组项，则可以更改（在渲染方法中）

<Text>{branchesName}</Text>

到

<Text>{this.state.name}</Text>

这是因为在Picker元素中，每当更改选定的Picker时，便会将其分配给属性名称下的组件状态。

在React Native中更改选择器时显示不同的文本

1 个答案: