Question

我想从下拉列表中进行选择，根据所选值map查询影片并在反应组件中渲染它们但我收到此错误

必须返回有效的React元素（或null）。您可能已经返回了undefined，数组或其他一些无效对象。

以下是代码：

...
constructor(props) {
    super(props)
    this.state = { description: '', list: [] }
}

handleList() {
  axios.get('https://facebook.github.io/react-native/movies.json')
    .then(resp => this.setState({...this.state, list: resp.data})) // Trás a lista atualizada e zera a descrição
    console.log(this.state.list)
}


render() {
    const loop = this.state.list.map((list) => {
    return(
        <Grid cols='2'>
                <select className="form-control" key={i}>
                    <option value="teste" onClick={() => this.handleList()}>{list.description}</option>
                    <option value="lime">Lime</option>
                    <option value="coconut">Coconut</option>
                    <option value="mango">Mango</option>
                </select>
        </Grid>
    )
  });
}

Answer 1

我认为onclick事件不适合在option中使用。最好在select

上使用它

` <select value={this.state.value} onChange={this.handleChange}>
    <option value="grapefruit">Grapefruit</option>
    <option value="lime">Lime</option>
    <option value="coconut">Coconut</option>
    <option value="mango">Mango</option>
  </select>
`

Sicne you are rendering a list of forms to reuse the same function, I always use a closure

    handleChange = (id) = () =>  axios
      .get(`$URL/id`)
      .then(r => r.data)
      .then(this.setState)

    render() {
      return (
        list.map(item => <select 
               key={item.id}
               onChange={this.handleChange(item.id)}
             >
                 <option value="grapefruit">Grapefruit</option>
                 <option value="lime">Lime</option>
                 <option value="coconut">Coconut</option>
                 <option value="mango">Mango</option>
             </select>))}

Answer 2

此代码示例存在一些问题。

您没有在render()函数内返回任何内容。（这是你遇到的主要问题，或者至少React正在哭泣）
至少在开始时，你是一个空数组和
即使在初始渲染过程中list.description内没有list也没有description，这个地图的回调就是list。{/ li >
您使用onClick代替option

onChange

您请求的端点返回一个对象，并尝试通过它进行映射。这应该是错误，因为map未定义为对象的函数。

我设法修复了我提到的问题，包括你目前正在使用的问题。为了节省能源，输入解决问题的长解释和原因，请查看此demo。它包含您发布的完全相同的代码，但当然是固定/工作。

渲染React元素时出错

2 个答案: