axios和数组修改

Question

你好，我正在寻找一种方法让我的坐标值在我的新对象数组中恢复，因为我使用的是 react-leaflet 并且纬度和经度被恢复了。所以我尝试创建一个新的对象数组，其值完全相同，只是修改了坐标数组。

class MapLayer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      city: [],
      chosenTown: 'Toulouse',
      name: CITIES
    };
    this.handleChange = this.handleChange.bind(this)
  }
  componentDidMount(){
    const toulouse = `https://sportplaces.api.decathlon.com/api/v1/places?origin=1.444209,43.604652&radius=50`
    axios.get(toulouse)
      .then(res => res.data.data.features)
      .then(data => {
        const newData = data
        newData.map(newData =>{
          return {
          ...newData,
          coordinates:[1,0,2],
          proximity: 1
        }
        })
        console.log(newData)
        })
        .then(data => {this.setState({city: data})})
        }
componentDidUpdate(){
    console.log('test') 
  }
  handleChange(e){
    const newFilter = e.target.value
     this.setState({chosenTown:newFilter});
 }

  render() {
    const { city } = this.state;
    const {chosenTown} = this.state;
    const {name} = this.state;
    const {handleChange} = this.handleChange
    return (
      <>
      <FilterSelector option={name} handleChange={handleChange} />
      <Map center={[43.604652, 1.444209]} zoom={12}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
       
        {city.filter((spot) => spot.properties.address_components.city === chosenTown)
        .map((geo) => (
          <Marker key={geo.properties.uuid} position={geo.geometry.coordinates} draggable="true">
            <Popup>
              <Preview geo={geo} />
            </Popup>
          </Marker>
        ))}
        
      </Map>
      </>
    );
  }
}

export default MapLayer;

Answer 1

您需要存储“Array.map”结果和 return 它。在您的代码中：

.then(data => {
  const newData = data
  newData.map(newData =>{
    return {
      ...newData,
      coordinates:[1,0,2],
      proximity: 1
    }
  })
  console.log(newData)
})

你的映射数据丢失了，你没有 returning 任何东西，所以下一个 .then 被调用 undefined 作为参数。

Return 映射变换，你应该可以开始了：

.then(data => {
  const newData = data.map(newData => {
    return {
      ...newData,
      coordinates:[1,0,2],
      proximity: 1
    }
  });
  console.log(newData);
  return newData;
})

记住：

Array.map 不会改变数组，而是创建一个新数组。
承诺中的每个 .then 都使用 return 之前 .then 或 .catch 中编辑的值。

axios和数组修改

Axios and array modify

leaflet

reactjs

axios

react-leaflet