Reactjs 在for循环中回答有关承诺的问题

我正在学习React和发出HTTP请求

最近，我正在尝试为我正在处理的网页实现一个下拉列表。在我的代码中，我必须循环遍历一个id数组，并对每个id发出post请求以提取元数据。所以我遇到了一个下拉选项的问题。下拉选项假定为相应id的名称

id数组是一个如下所示的对象数组

[{key: "someidnumber1", count: 5}, {key: "someidnumber2", count: 5}, {key: "someidnumber3", count: 10},....]

所以我首先做的是循环id数组，并对每个id作为参数发出post请求。这在我的渲染方法中

render() {
  return(
    <SomeOtherComponent>
      { //Do something to fetch the ids
        let promises = [];
        let names = [];
        let options = [];

        ids.map(id => {
          promises.push(
            axios
              .post(TARGET_META_URL, {
                filters: [
                  {
                    field: "id",
                    values: [id.key]
                  }
                ]
              })
              .then(response => {
                 // adding the name from the data into the names array
                 names.push(response.data[0].name);
              })
        });

        Promise.all(promises).then(() => {
          // Wait for the promises to collection all the names
          // and pass into a new array
          options = [...names];
        }

        return (
          <Dropdown 
            options={options}
          />
        );
       }
    </SomeOtherComponent>
  );
}

render（）{
返回(
{//请执行一些操作以获取ID
让承诺=[]；
让名称=[]；
让期权=[]；
map（id=>{
承诺，推动(
axios
.post（目标\元\ URL{
过滤器：[
{
字段：“id”，
值：[id.key]
}
]
})
。然后（响应=>{
//将数据中的名称添加到名称数组中
name.push（response.data[0].name）；
})
});
承诺。所有（承诺）。然后（（）=>{
//等待承诺收集所有的名字
//并传递到一个新数组中
选项=[…名称]；
}
返回(
);
}
);
}

---

打开后我的下拉选项是空的。所以我做了一些控制台日志，发现这些选项是在承诺之外声明的方法时，下拉列表将接收空数组。我需要有关如何设置下拉列表选项的帮助，以便它在完成运行之前等待所有代码。我尝试将第二个返回放入Promise.all（）中，但我得到一个错误方法，该方法说render（）没有返回。

创建另一个组件，在响应返回后获取数据并呈现它们。使用

Promise.all

等待所有承诺一起解决

const getName = id => axios
    .post(TARGET_META_URL, {
        filters: [
            {
                field: "id",
                values: [id.key]
            }
        ]
    })
    .then(response => response.data[0].name);
const AsyncDropdown = ({ ids }) => {
    const [options, setOptions] = useState();
    useEffect(() => {
        Promise.all(ids.map(getName))
            .then(setOptions)
            .catch((err) => {
                // handle errors
            });
    }, [ids]);
    return options ? <Dropdown options={options} /> : null;
}

const getName=id=>axios
.post（目标\元\ URL{
过滤器：[
{
字段：“id”，
值：[id.key]
}
]
})
.then（response=>response.data[0].name）；
常量异步下拉列表=（{ids}）=>{
const[options，setOptions]=useState（）；
useffect（（）=>{
Promise.all（id.map（getName））
.然后（设置选项）
.catch（（错误）=>{
//处理错误
});
}，[ids]）；
返回选项？：空；
}

并将原始渲染方法替换为：

render() {
  return(
    <SomeOtherComponent>
      <AsyncDropdown ids={ids} />
    </SomeOtherComponent>
  );
}

render（）{
返回(
);
}

制作另一个组件，在响应返回后获取数据并呈现它们。使用

Promise.all

等待所有承诺一起解决

const getName = id => axios
    .post(TARGET_META_URL, {
        filters: [
            {
                field: "id",
                values: [id.key]
            }
        ]
    })
    .then(response => response.data[0].name);
const AsyncDropdown = ({ ids }) => {
    const [options, setOptions] = useState();
    useEffect(() => {
        Promise.all(ids.map(getName))
            .then(setOptions)
            .catch((err) => {
                // handle errors
            });
    }, [ids]);
    return options ? <Dropdown options={options} /> : null;
}

const getName=id=>axios
.post（目标\元\ URL{
过滤器：[
{
字段：“id”，
值：[id.key]
}
]
})
.then（response=>response.data[0].name）；
常量异步下拉列表=（{ids}）=>{
const[options，setOptions]=useState（）；
useffect（（）=>{
Promise.all（id.map（getName））
.然后（设置选项）
.catch（（错误）=>{
//处理错误
});
}，[ids]）；
返回选项？：空；
}

并将原始渲染方法替换为：

render() {
  return(
    <SomeOtherComponent>
      <AsyncDropdown ids={ids} />
    </SomeOtherComponent>
  );
}

render（）{
返回(
);
}

也许这会有帮助-

componentDidMount() {
    let promises = [];
    let options = [];
    ids.map(id => {
        promises.push(
            axios
            .post(TARGET_META_URL, {
            filters: [
                {
                    field: "id",
                    values: [id.key]
                }
            ]
        })
    });

    Promise.all(promises).then((response) => {
    // Wait for the promises to collection all the names
    // and pass into a new array
    options = response.map(res => res.data[0].name);
    this.setState({ options })
    }
}

render() {
    return(
        <SomeOtherComponent>
        { this.state.options?.length ? <Dropdown options={this.state.options} /> : null }
        </SomeOtherComponent>
    );
}

componentDidMount（）{
让承诺=[]；
让期权=[]；
map（id=>{
承诺，推动(
axios
.post（目标\元\ URL{
过滤器：[
{
字段：“id”，
值：[id.key]
}
]
})
});
承诺。所有（承诺）。然后（（回应）=>{
//等待承诺收集所有的名字
//并传递到一个新数组中
options=response.map（res=>res.data[0].name）；
this.setState（{options}）
}
}
render（）{
返回(
{this.state.options？.length？：null}
);
}

也许这会有帮助-

componentDidMount() {
    let promises = [];
    let options = [];
    ids.map(id => {
        promises.push(
            axios
            .post(TARGET_META_URL, {
            filters: [
                {
                    field: "id",
                    values: [id.key]
                }
            ]
        })
    });

    Promise.all(promises).then((response) => {
    // Wait for the promises to collection all the names
    // and pass into a new array
    options = response.map(res => res.data[0].name);
    this.setState({ options })
    }
}

render() {
    return(
        <SomeOtherComponent>
        { this.state.options?.length ? <Dropdown options={this.state.options} /> : null }
        </SomeOtherComponent>
    );
}

componentDidMount（）{
让承诺=[]；
让期权=[]；
map（id=>{
承诺，推动(
axios
.post（目标\元\ URL{
过滤器：[
{
字段：“id”，
值：[id.key]
}
]
})
});
承诺。所有（承诺）。然后（（回应）=>{
//等待承诺收集所有的名字
//并传递到一个新数组中
options=response.map（res=>res.data[0].name）；
this.setState（{options}）
}
}
render（）{
返回(
{this.state.options？.length？：null}
);
}

Ooookay，你不会像那样在JSX中嵌入状态和逻辑。你需要在

componentDidMount

生命周期函数中执行API请求，并将选项存储在stateookay中，你不会像那样在JSX中嵌入状态和逻辑。你需要在

componentDidMount

生命周期函数中执行API请求并将选项存储在state中。因此，基本上，请求是在另一个组件中发出的，并作为子组件包含，然后将返回的数据传递回该父组件中。如果您愿意，可以将所有数据都推到单个组件中，但这看起来会很混乱，并且比应该的更难管理。最好将关注点分开n可能。好的，我将试着修改一下我的代码，看看它是否有效，感谢lotSo。基本上，请求是在另一个组件中发出的，并作为子组件包含，然后将返回的数据传递回这个pare