Question

我在渲染中有我的数据网格，并且this.state.rows和this.state.columns 我想从另一个API更改列的值之一。

在这里获取column的值并可以正常工作。

const DataFormatter = ({ value }) => { <span>{value}</span> });

我想将列的值从id更改为名称。数据对象如下所示：

const data = {
    value: 3242;
    name: somename;
}

我的新DataFormatter记录了名称，但未呈现任何内容。它可能会返回，因为对象子代需要一个数组。或对象承诺问题。

const DataFormatter = ({ value }) => { 

    const newValue = fetch("domain.name/{value}")
        .then(response=> response.json())
        .then(data => {
            console.log(data.name)
            return <span>data.name</span>
        });

});

Answer 1

我不知道您在哪里使用DateFromatter，但您可能会以其他组件的形式返回他。

请牢记，您不能等待获取请求完成才返回值，因此您需要做的是将DateFormatter编写为类，在尚未获取数据时返回null。并在componentDidMount中进行提取请求。

类似的东西

class DateFormatter extends React.Component {
  constructor () {
    this.state = {
      name: null,
    };
  }

  componentDidMount () {
    fetch("domain.name/{this.props.value}")
      .then(response=> response.json())
      .then(data => {
          console.log(data.name)
          this.setState({name: data.name});
      });
  }

  render () {
    return <span>{this.state.name}</span>
  }
}

Answer 2

在我的例子中，我们需要在 Capes 字母中格式化国家代码，我是通过以下方式做到的

const DataFormatter = ({ value }) => { return <span style={{textTransform: 'uppercase'}}>{value}</span> };

const columns = [
  { key: "countryCode", name: "Country", editable: false, width:75,formatter:DataFormatter }
];

如何在React数据网格中从API值格式？

2 个答案: