Question

我是反应灵的新手。我创建了2个组件。第一个组件将通过ajax调用从数据库中获取数组值，第二个组件将读取值并在UI中打印。

在第一个组件中，我得到了值并将其存储在setState中。现在我的状态有[1,2,3,4]，我想将这个数组值返回给其他组件，我该如何返回？尝试了谷歌的许多选项，但我的输出并不像预期的那样。它给我的是字符串格式而不是数组。这就是我返回数组值的方式：

第一部分

render() {
    return(
        <div>
            {this.state.options}
        </div>
    )
}

第二部分

import Options from './OptionsVaues.jsx';
...
...
const Opts = <Options/>;
...
{Opts}

这里的输出是字符串值，如下所示，但我希望它作为数组值

请让我知道我在这里做错了什么..

Answer 1

class Options extends Component {
  constructor(props) {
    // have an initial state for options in your local state, e.g. this.state = { options: null }
  }

  componentDidMount() {
    // make xhr request to retrieve options from API
    // store in local state via setState
  }

  render() {
    return (
      <div>
        {
          this.state.options 
          ? this.state.options.map(option => <Option option={option} />)
          : null
        }
      </div>
    );
  }
}

function Option(props) {
  return <div>{props}</div>;
}

获取数据并以本地状态存储后，可以映射它以呈现从阵列中获取实体的另一个组件。它仅在您所在州有选项时进行映射，您可以阅读有关条件渲染的更多信息here。

Answer 2

渲染数组值时，必须先将数组的值映射到相应的元素，如下所示：

return (
  <div>
    {(this.state.options || []).map(option => (
      <div key={option.id}>
        {option}
      </div>
    ))}
  </div>
);

数组元素需要key属性。 React使用它来确定是否已呈现给定的数组元素，并且可以重用它的DOM组件。您可以详细了解here

React js将数组值从一个组件传输到另一个组件

2 个答案: