Conatiner.js

Question

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

我正在通过使用react-apollo-hooks从graphql服务器获取数据，并尝试将一些数据提供给react-select选项。我检查了数据，它们很好。但是，在声明数组有效的同时，使用数据无效（“选择”组件显示“无选项”）。

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

这是我的代码：

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

Sathish Kumar在注释中建议，对数组的更改不会影响React触发组件的重新渲染。

您应该将阵列移到状态并使用a更新阵列（或者，如果您使用的是功能组件，请使用Reacts new Hooks）。

this.setState

未应用react-select组件选项

Conatiner.js

Presenter.js

1 个答案: