react-select 组件选项未应用

Question

我正在尝试以编程方式提供选项道具，但选项没有出现。

我正在使用 react-apollo-hooks 从 graphql 服务器获取数据，并尝试将一些数据提供给 react-select 的选项。我检查了数据，他们很好。但是，使用数据不起作用（Select 组件显示 "No Options"），而声明数组有效。

我检查了我是否在文件之间正确传递了变量，并收到了正确的数据。

这是我的代码：

Conatiner.js

const generated_list = [];
const listGenerator = () => {
  data.sample.map( single => {
    const temp = { label: single.A, value: single.B };
    generated_list.push(temp);
  }
}

数据在哪里

data.sample = [ { A: '1', B: '1', C: '1' }, { A: '2', B: '2', C: '2' } ]

Presenter.js

<Button onClick={() => listGenerator()} text={'Get Lists'} />
<Select options={generated_list} />

但是下面的代码如我所料地工作了。

const declared_list = { [label: '1', value: '1'], 
               [label: '2', value: '2'] };
...
<Button onClick={() => listGenerator()} text={'Get Lists'} />
<Select options={declared_list} />

我认为生成的列表与声明的列表不同，所以我通过控制台日志进行了比较。

console.log(
  typeof generated_list,
  generated_list`,
  JSON.stringify(generated_list),
  typeof declared_list,
  declared_list`,
  JSON.stringify(declared_list),
  JSON.stringify(generated_list) === JSON.stringify(declared_list),
);

一切都一样，=== 运算符返回 true。

我不知道接下来要检查什么，所以任何帮助将不胜感激。

Answer 1

正如评论中所建议的那样，对数组的更改不会影响 React 触发组件的重新渲染。

您应该将数组移动到状态并使用 this.setState 更新数组（或者如果您使用的是功能组件，请使用 Reacts new Hooks）。

class MySelect extends Component {
   state = {
      options: [],
   }

   populateArray = () => {
       var newOptions = [];

       /* Populate the `newOptions` array */

       this.setState({ options: newOptions });
   }

   render() {
       return (<>
           <Button onClick={this.populateArray}>Click me</Button>
           <Select { ... } options={this.state.options} />
       <>);
   }
}

react-select 组件选项未应用

react-select component options are not applied

reactjs

react-select

Conatiner.js

Presenter.js